Badge
Use this component to inform merchants of the status of an object or of an action that’s been taken.
Anchor to badgepropsBadgeProps
Anchor to BadgeBaseProps
BadgeBaseProps
Anchor to tone
tone
Adjusts the color of the badge.
Anchor to size
size
Extract<, 'small-100' | 'base'>
Adjusts the size of the badge.
Anchor to accessibilityLabel
accessibilityLabel
string
A label that describes the purpose or contents of the element. When set, it will be announced
to users using assistive technologies and will provide them with more context. When set, any
children or label supplied will not be announced to screen readers.
Anchor to BadgeIconProps
BadgeIconProps
Anchor to icon
icon
required
Adds an icon to the badge.
Anchor to iconPosition
iconPosition
"start" | "end"
Default: 'start'
Adjusts the position of the icon within the badge. Requires icon to be set.
Anchor to BadgeNoIconProps
BadgeNoIconProps
Anchor to icon
icon
never
Anchor to iconPosition
iconPosition
never
Was this section helpful?
Simple Badge example
import {render, Badge} from '@shopify/ui-extensions-react/admin';
render('Playground', () => <App />);
function App() {
return (
<Badge
tone="info"
>
Fulfilled
</Badge>
);
}
Preview
