diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts
index cca536358b..2c4facd2e7 100644
--- a/cypress/integration/sitemap-vrt/constants.ts
+++ b/cypress/integration/sitemap-vrt/constants.ts
@@ -64,6 +64,9 @@ export const SITEMAP = [
"/components/checkbox/",
"/components/checkbox/api",
"/components/checkbox/changelog",
+ "/components/corner-ornament",
+ "/components/corner-ornament/api",
+ "/components/corner-ornament/changelog",
"/components/data-grid/",
"/components/data-grid/api",
"/components/data-grid/changelog",
diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json
index 23d1c3c567..9aad3b4c79 100644
--- a/packages/paste-website/package.json
+++ b/packages/paste-website/package.json
@@ -57,6 +57,7 @@
"@twilio-paste/color-contrast-utils": "^5.0.0",
"@twilio-paste/combobox": "^16.2.1",
"@twilio-paste/combobox-primitive": "^2.1.1",
+ "@twilio-paste/corner-ornament": "^0.0.0",
"@twilio-paste/customization": "^8.2.0",
"@twilio-paste/data-grid": "^8.3.0",
"@twilio-paste/data-visualization-library": "^5.0.0",
diff --git a/packages/paste-website/src/component-examples/CornerOrnamentExamples.ts b/packages/paste-website/src/component-examples/CornerOrnamentExamples.ts
new file mode 100644
index 0000000000..a58003f781
--- /dev/null
+++ b/packages/paste-website/src/component-examples/CornerOrnamentExamples.ts
@@ -0,0 +1,283 @@
+export const featuredExample = `
+const FeaturedExample = () => {
+ return (
+
+
+
+
+
+
+ notification value is
+
+ 100
+
+
+
+
+
+
+
+
+ You have a notification
+
+
+
+
+
+
+
+
+ incoming call
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+render(
+
+)`.trim();
+
+export const badgeCornerOrnamentExample = `
+const BadgeCornerOrnamentExample = () => {
+ return (
+
+
+
+
+
+
+ notification value is
+
+ 100
+
+
+
+
+
+
+
+
+ notification value is
+
+ 100
+
+
+
+
+
+
+
+
+ notification value is
+
+ 100
+
+
+
+
+
+
+
+
+ notification value is
+
+ 100
+
+
+
+
+ );
+};
+
+render(
+
+)`.trim();
+
+export const badgeOverflowCornerOrnamentExample = `
+const BadgeOverflowCornerOrnamentExample = () => {
+ return (
+
+
+
+
+
+
+ notification value is
+
+ 9+
+
+
+
+
+
+
+
+
+
+ You have a notification
+
+
+
+
+ );
+};
+
+render(
+
+)`.trim();
+
+export const iconCornerOrnamentExample = `
+const IconCornerOrnamentExample = () => {
+ return (
+
+
+
+
+
+
+ incoming call
+
+
+
+
+
+
+
+
+ You have a notification
+
+
+
+
+
+
+
+
+ incoming call
+
+
+
+
+
+
+
+
+ You have a notification
+
+
+
+
+ );
+};
+
+render(
+
+)`.trim();
+
+export const avatarCornerOrnamentExample = `
+const IconCornerOrnamentExample = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+render(
+
+)`.trim();
diff --git a/packages/paste-website/src/pages/components/corner-ornament/api.mdx b/packages/paste-website/src/pages/components/corner-ornament/api.mdx
new file mode 100644
index 0000000000..6911729c74
--- /dev/null
+++ b/packages/paste-website/src/pages/components/corner-ornament/api.mdx
@@ -0,0 +1,67 @@
+export const meta = {
+ title: 'Corner Ornament',
+ package: '@twilio-paste/corner-ornament',
+ description: 'Corner Ornament is a container used to apply a cutout to a base component and position another element as its ornament.',
+ slug: '/components/corner-ornament/api',
+};
+
+import Changelog from '@twilio-paste/corner-ornament/CHANGELOG.md';
+import packageJson from '@twilio-paste/corner-ornament/package.json';
+
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+ const navigationData = await getNavigationData();
+ const feature = await getFeature('Corner ornament');
+ const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/corner-ornament');
+ return {
+ props: {
+ data: {
+ ...packageJson,
+ ...feature,
+ },
+ componentApi,
+ mdxHeadings: [...mdxHeadings, ...componentApiTocData],
+ navigationData,
+ pageHeaderData: {
+ categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+ githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/corner-ornament',
+ storybookUrl: '/?path=/story/components-corner-ornament--supported-badge',
+ },
+ },
+ };
+};
+
+## Installation
+
+```bash
+yarn add @twilio-paste/corner-ornament - or - yarn add @twilio-paste/core
+```
+
+## Usage
+
+```jsx
+import { CornerOrnament, CornerOrnamentBase, CornerOrnamentContainer } from '@twilio-paste/core/corner-ornament';
+
+export const Example = () => {
+ return (
+
+
+ // Your ornament base here
+
+
+ {Your accessible reader value here}
+ // Your corner ornament here
+
+
+ );
+};
+```
+
+## Props
+
+
diff --git a/packages/paste-website/src/pages/components/corner-ornament/changelog.mdx b/packages/paste-website/src/pages/components/corner-ornament/changelog.mdx
new file mode 100644
index 0000000000..32aa5c23ba
--- /dev/null
+++ b/packages/paste-website/src/pages/components/corner-ornament/changelog.mdx
@@ -0,0 +1,37 @@
+export const meta = {
+ title: 'Corner Ornament',
+ package: '@twilio-paste/corner-ornament',
+ description: 'Corner Ornament is a container used to apply a cutout to a base component and position another element as its ornament.',
+ slug: '/components/corner-ornament/changelog',
+};
+
+import Changelog from '@twilio-paste/corner-ornament/CHANGELOG.md';
+import packageJson from '@twilio-paste/corner-ornament/package.json';
+
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData} from '../../../utils/api';
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+ const navigationData = await getNavigationData();
+ const feature = await getFeature('Corner ornament');
+ return {
+ props: {
+ data: {
+ ...packageJson,
+ ...feature,
+ },
+ navigationData,
+ mdxHeadings,
+ pageHeaderData: {
+ categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+ githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/corner-ornament',
+ storybookUrl: '/?path=/story/components-corner-ornament--supported-badge',
+ },
+ },
+ };
+};
+
+
diff --git a/packages/paste-website/src/pages/components/corner-ornament/index.mdx b/packages/paste-website/src/pages/components/corner-ornament/index.mdx
new file mode 100644
index 0000000000..e9c469b367
--- /dev/null
+++ b/packages/paste-website/src/pages/components/corner-ornament/index.mdx
@@ -0,0 +1,370 @@
+export const meta = {
+ title: "Corner Ornament",
+ package: "@twilio-paste/corner-ornament",
+ description:
+ "Corner Ornament is a container used to apply a cutout to a base component and position another element as its ornament.",
+ slug: "/components/corner-ornament",
+};
+
+import Changelog from "@twilio-paste/corner-ornament/CHANGELOG.md";
+import packageJson from "@twilio-paste/corner-ornament/package.json";
+import { Callout, CalloutHeading, CalloutTextimport } from "@twilio-paste/callout";
+import { Table, THead, TBody, Tr, Td, Th } from "@twilio-paste/table";
+import { Box } from "@twilio-paste/box";
+import { Stack } from "@twilio-paste/stack";
+import { Badge } from "@twilio-paste/badge";
+import { Button } from "@twilio-paste/button";
+import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
+import { Avatar } from "@twilio-paste/avatar";
+import { CornerOrnament, CornerOrnamentBase, CornerOrnamentContainer } from "@twilio-paste/corner-ornament";
+import { CartIcon } from "@twilio-paste/icons/esm/CartIcon";
+import { NotificationOrnamentIcon } from "@twilio-paste/icons/esm/NotificationOrnamentIcon";
+import { DataTableIcon } from "@twilio-paste/icons/esm/DataTableIcon";
+import { CallIncomingIcon } from "@twilio-paste/icons/esm/CallIncomingIcon";
+import { NotificationIcon } from "@twilio-paste/icons/esm/NotificationIcon";
+
+import { SidebarCategoryRoutes } from "../../../constants";
+import ComponentPageLayout from "../../../layouts/ComponentPageLayout";
+import { getFeature, getNavigationData } from "../../../utils/api";
+import {
+ featuredExample,
+ badgeCornerOrnamentExample,
+ badgeOverflowCornerOrnamentExample,
+ iconCornerOrnamentExample,
+ avatarCornerOrnamentExample,
+} from "../../../component-examples/CornerOrnamentExamples";
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+ const navigationData = await getNavigationData();
+ const feature = await getFeature("Corner ornament");
+ return {
+ props: {
+ data: {
+ ...packageJson,
+ ...feature,
+ },
+ navigationData,
+ mdxHeadings,
+ pageHeaderData: {
+ categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+ githubUrl: "https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/corner-ornament",
+ storybookUrl: "/?path=/story/components-corner-ornament--supported-badge",
+ },
+ },
+ };
+};
+
+
+ {featuredExample}
+
+
+## Guidelines
+
+### About Combobox
+
+Use the Corner Ornament to quickly relate an item count (usually notifications) or graphic element (like an [Icon](/components/icon) or [Avatar](/components/avatar)) to another element, called a base component.
+
+Corner Ornaments are used to show:
+
+- Notification count or unread notifications
+- Cart count in commerce use cases
+- Relationships between graphic elements in dense layouts. Examples include relationships between user and status in a user list, or between model and warehouse in a table.
+
+Use a Corner Ornament only when the relationship between a base component and its ornament is immediately obvious. If there's a chance that it might be unclear, show the information in the ornament in another way, such as using visible text.
+
+The Corner Ornament component contains these elements:
+
+- `CornerOrnamentContainer`: Responsible for wrapping the components together and determining the positions based on configuration defined via props.
+- `CornerOrnamentBase`: The component that appears underneath the ornament. Only [Avatar](/components/avatar), [Icon](/components/icon), or [icon Buttons](/components/button#icon-buttons) should be used as base components.
+- `CornerOrnament`: The ornament that appears on top of the base component. Only [Avatar](/components/avatar), [Counter Badge](/components/badge#counter), or [Icon](/components/icon) can be used as ornaments.
+
+### Accessibility
+
+Make sure Corner Ornaments clearly communicate to assistive technology what is being represented in the ornament. Ways to do this include:
+
+- For Badges or notifications, use the [Screen Reader Only](/components/screen-reader-only) component to wrap visually-hidden text.
+- For [icons](/components/icon/usage-guidelines#accessibility), specify that the icon is informative and give it a title.
+
+### Placement
+
+Position the ornament at the top when it takes priority over its element, and at the bottom when the element takes priority over its ornament.
+
+
+ Corner Ornaments for right-to-left languages
+
+ For right-to-left languages, Corner Ornaments should be placed on the left. Do you need us to support this variant?
+ Let us know in a Github Discussion!
+
+
+
+### Hiding Corner Ornament
+
+Since this component is composable and the base component you are wrapping will look the same if you remove the ornament, we recommend removing the Corner Ornament components from the DOM tree if you want to hide the ornament. Hiding the ornament and removing the cutout are not supported by this component.
+## Variants
+
+### Badges as Corner Ornaments
+
+Use Badges as Corner Ornaments for item counts like notifications or cart counts. Only [counter Badges](/components/badge#counter) can be used as Corner Ornaments.
+
+In almost all cases, Badges should be placed at the top using `position="top_end"`.
+
+
+ {badgeCornerOrnamentExample}
+
+
+Use these size pairings for pairing base components with Badges:
+
+
+
+
+
+
Corner Ornament Container and Base size
+
Badge size
+
+
+
+
+
sizeIcon50
+
small
+
+
+
sizeIcon60
+
small
+
+
+
sizeIcon70
+
small
+
+
+
sizeIcon80
+
small
+
+
+
sizeIcon90
+
small
+
+
+
sizeIcon100
+
default
+
+
+
sizeIcon110
+
default
+
+
+
+
+
+#### Item count overflow strategies
+
+For item counts, make sure that you have a layout strategy for overflowing count text. This can include:
+
+- Using a “+” sign when reaching double- or triple-digits, such as “9+” items
+- Not using a Corner Ornament at all. Instead, place the counter Badge next to the element
+- For notification use cases, if showing count isn’t important, use NotificationOrnamentIcon as a Corner Ornament instead.
+
+
+ {badgeOverflowCornerOrnamentExample}
+
+
+### Icons as Corner Ornaments
+
+Use icons as Corner Ornaments to show statuses or states.
+
+When using an icon as an ornament, make sure it has a color that has a 3:1 contrast ratio with the background.
+
+
+ {iconCornerOrnamentExample}
+
+
+Use these size pairings for pairing base components with icons:
+
+
+
+
+
+
Corner Ornament Container and Base size
+
Icon size
+
+
+
+
+
sizeIcon20
+
sizeIcon05
+
+
+
sizeIcon30
+
sizeIcon05
+
+
+
sizeIcon40
+
sizeIcon10
+
+
+
sizeIcon50
+
sizeIcon10
+
+
+
sizeIcon60
+
sizeIcon10
+
+
+
sizeIcon70
+
sizeIcon30
+
+
+
sizeIcon80
+
sizeIcon40
+
+
+
sizeIcon90
+
sizeIcon40
+
+
+
sizeIcon100
+
sizeIcon50
+
+
+
sizeIcon110
+
sizeIcon70
+
+
+
+
+
+### Avatars as Corner Ornaments
+
+Use Avatars as Corner Ornaments to show a relationship to an entity or a user.
+
+In almost all cases, Avatars should be placed at the bottom using `position="bottom_end"`.
+
+
+ {avatarCornerOrnamentExample}
+
+
+Use these size pairings for pairing base components with Avatars:
+
+
+