const FeaturedExample = () => {return (<Stack orientation="horizontal" spacing="space70"><CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80" position="top_end"><CornerOrnamentBase><CartIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" /></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>notification value is</ScreenReaderOnly><Badge as="span" variant="notification_counter" size="small">100</Badge></CornerOrnament></CornerOrnamentContainer><CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80" position="top_end"><CornerOrnamentBase><NotificationIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="Notifications" /></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>You have a notification</ScreenReaderOnly><NotificationOrnamentIcon color="colorTextIconNotification" decorative size="sizeIcon40" /></CornerOrnament></CornerOrnamentContainer><CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80"><CornerOrnamentBase><Avatarsize="sizeIcon80"name="Tri O'Hara"src="/images/avatars/avatar4.png"/></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>incoming call</ScreenReaderOnly><CallIncomingIcon color="colorTextIcon" decorative size="sizeIcon40" /></CornerOrnament></CornerOrnamentContainer><CornerOrnamentContainer cornerOrnamentType="avatar" size="sizeIcon80"><CornerOrnamentBase><DataTableIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="data table" /></CornerOrnamentBase><CornerOrnament><Avatarsize="sizeIcon30"name="Tri O'Hara"src="/images/avatars/avatar4.png"/></CornerOrnament></CornerOrnamentContainer></Stack>);};render(<FeaturedExample />)
Use the Corner Ornament to quickly relate an item count (usually notifications) or graphic element (like an Icon or 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, Icon, or icon Buttons should be used as base components.CornerOrnament: The ornament that appears on top of the base component. Only Avatar, Counter Badge, or Icon can be used as ornaments.
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 component to wrap visually-hidden text.
- For icons, specify that the icon is informative and give it a title.
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.
(information)
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!
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.
Use Badges as Corner Ornaments for item counts like notifications or cart counts. Only counter Badges can be used as Corner Ornaments.
In almost all cases, Badges should be placed at the top using position="top_end".
const BadgeCornerOrnamentExample = () => {return (<Stack orientation="horizontal" spacing="space70"><CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80"><CornerOrnamentBase><CartIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" /></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>notification value is</ScreenReaderOnly><Badge as="span" variant="notification_counter" size="small">100</Badge></CornerOrnament></CornerOrnamentContainer><CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80"><CornerOrnamentBase><Avatarsize="sizeIcon80"name="Tri O'Hara"src="/images/avatars/avatar4.png"/></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>notification value is</ScreenReaderOnly><Badge as="span" variant="notification_counter" size="small">100</Badge></CornerOrnament></CornerOrnamentContainer><CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80" position="top_end"><CornerOrnamentBase><CartIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" /></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>notification value is</ScreenReaderOnly><Badge as="span" variant="notification_counter" size="small">100</Badge></CornerOrnament></CornerOrnamentContainer><CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80" position="top_end"><CornerOrnamentBase><Avatarsize="sizeIcon80"name="Tri O'Hara"src="/images/avatars/avatar4.png"/></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>notification value is</ScreenReaderOnly><Badge as="span" variant="notification_counter" size="small">100</Badge></CornerOrnament></CornerOrnamentContainer></Stack>);};render(<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 |
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.
const BadgeOverflowCornerOrnamentExample = () => {return (<Stack orientation="horizontal" spacing="space70"><CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80" position="top_end"><CornerOrnamentBase><CartIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart"/></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>notification value is</ScreenReaderOnly><Badge as="span" variant="notification_counter" size="small">9+</Badge></CornerOrnament></CornerOrnamentContainer><Button variant="secondary"><NotificationIcon decorative={true} size="sizeIcon20" />Notifications<Badge as="span" variant="notification_counter" size="small">10</Badge></Button><CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80" position="top_end"><CornerOrnamentBase><NotificationIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="Notifications" /></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>You have a notification</ScreenReaderOnly><NotificationOrnamentIcon color="colorTextIconNotification" decorative size="sizeIcon40" /></CornerOrnament></CornerOrnamentContainer></Stack>);};render(<BadgeOverflowCornerOrnamentExample />)
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.
const IconCornerOrnamentExample = () => {return (<Stack orientation="horizontal" spacing="space70"><CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80"><CornerOrnamentBase><Avatarsize="sizeIcon80"name="Tri O'Hara"src="/images/avatars/avatar4.png"/></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>incoming call</ScreenReaderOnly><CallIncomingIcon color="colorTextIcon" decorative size="sizeIcon40" /></CornerOrnament></CornerOrnamentContainer><CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80"><CornerOrnamentBase><NotificationIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" /></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>You have a notification</ScreenReaderOnly><NotificationOrnamentIcon color="colorTextIconNotification" decorative size="sizeIcon40" /></CornerOrnament></CornerOrnamentContainer><CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80" position="top_end"><CornerOrnamentBase><Avatarsize="sizeIcon80"name="Tri O'Hara"src="/images/avatars/avatar4.png"/></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>incoming call</ScreenReaderOnly><CallIncomingIcon color="colorTextIcon" decorative size="sizeIcon40" /></CornerOrnament></CornerOrnamentContainer><CornerOrnamentContainer cornerOrnamentType="icon" size="sizeIcon80" position="top_end"><CornerOrnamentBase><NotificationIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" /></CornerOrnamentBase><CornerOrnament><ScreenReaderOnly>You have a notification</ScreenReaderOnly><NotificationOrnamentIcon color="colorTextIconNotification" decorative size="sizeIcon40" /></CornerOrnament></CornerOrnamentContainer></Stack>);};render(<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 |
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".
const IconCornerOrnamentExample = () => {return (<Stack orientation="horizontal" spacing="space70"><CornerOrnamentContainer cornerOrnamentType="avatar" size="sizeIcon80"><CornerOrnamentBase><Avatarsize="sizeIcon80"name="Tri O'Hara"src="/images/avatars/avatar4.png"/></CornerOrnamentBase><CornerOrnament><Avatarsize="sizeIcon30"name="Twilio"src="/images/avatars/avatar5.png"/></CornerOrnament></CornerOrnamentContainer><CornerOrnamentContainer cornerOrnamentType="avatar" size="sizeIcon80"><CornerOrnamentBase><DataTableIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" /></CornerOrnamentBase><CornerOrnament><Avatarsize="sizeIcon30"name="Tri O'Hara"src="/images/avatars/avatar4.png"/></CornerOrnament></CornerOrnamentContainer><CornerOrnamentContainer cornerOrnamentType="avatar" size="sizeIcon80" position="top_end"><CornerOrnamentBase><Avatarsize="sizeIcon80"name="Tri O'Hara"src="/images/avatars/avatar4.png"/></CornerOrnamentBase><CornerOrnament><Avatarsize="sizeIcon30"name="Twilio"src="/images/avatars/avatar5.png"/></CornerOrnament></CornerOrnamentContainer><CornerOrnamentContainer cornerOrnamentType="avatar" size="sizeIcon80" position="top_end"><CornerOrnamentBase><DataTableIcon color="colorTextIcon" size="sizeIcon80" decorative={false} title="shopping cart" /></CornerOrnamentBase><CornerOrnament><Avatarsize="sizeIcon30"name="Tri O'Hara"src="/images/avatars/avatar4.png"/></CornerOrnament></CornerOrnamentContainer></Stack>);};render(<IconCornerOrnamentExample />)
Use these size pairings for pairing base components with Avatars:
| Corner Ornament Container and Base size | Icon size |
|---|---|
| sizeIcon20 | sizeIcon10 |
| sizeIcon30 | sizeIcon10 |
| sizeIcon40 | sizeIcon10 |
| sizeIcon50 | sizeIcon10 |
| sizeIcon60 | sizeIcon10 |
| sizeIcon70 | sizeIcon10 |
| sizeIcon80 | sizeIcon30 |
| sizeIcon90 | sizeIcon30 |
| sizeIcon100 | sizeIcon60 |
| sizeIcon110 | sizeIcon70 |