Badgecomponent
component
A component for displaying status, categories, or labels with multiple visual variants. You can view the Storybook for more interactive examples.
Was this section helpful?
Badge
import {Badge} from '@shopify/shop-minis-react'
export default function MyComponent() {
return <Badge>Badge</Badge>
}
examples
Badge
import {Badge} from '@shopify/shop-minis-react' export default function MyComponent() { return <Badge>Badge</Badge> }
Preview
Anchor to examplesExamples
Badge variants and styles
Anchor to example-default-badgeDefault badge
A default badge with primary styling
Anchor to example-secondary-badgeSecondary badge
A secondary badge with muted styling
Anchor to example-destructive-badgeDestructive badge
A destructive badge for warnings or errors
Anchor to example-outline-badgeOutline badge
An outline badge with border styling
Was this section helpful?
Default badge
import {Badge} from '@shopify/shop-minis-react'
export default function MyComponent() {
return <Badge>Badge</Badge>
}
examples
Default badge
description
A default badge with primary styling
import {Badge} from '@shopify/shop-minis-react' export default function MyComponent() { return <Badge>Badge</Badge> }Secondary badge
description
A secondary badge with muted styling
import {Badge} from '@shopify/shop-minis-react' export default function MyComponent() { return <Badge variant="secondary">Secondary</Badge> }Destructive badge
description
A destructive badge for warnings or errors
import {Badge} from '@shopify/shop-minis-react' export default function MyComponent() { return <Badge variant="destructive">Destructive</Badge> }Outline badge
description
An outline badge with border styling
import {Badge} from '@shopify/shop-minis-react' export default function MyComponent() { return <Badge variant="outline">Outline</Badge> }