Badge

A component for displaying status, categories, or labels with multiple visual variants.

Anchor to propsProps

Anchor to asChild asChild boolean: Render as child element instead of span
Anchor to children children React.ReactNode: Content to render inside
Anchor to variant variant 'primary' | 'secondary' | 'destructive' | 'outline' | 'none': Visual style variant

Examples

tsx

import React from 'react'

import {Badge} from '@shopify/shop-minis-react'

export default function MyComponent() {

return (

<Badge>Default</Badge>

<Badge variant="secondary">Secondary</Badge>

<Badge variant="destructive">Destructive</Badge>

<Badge variant="outline">Outline</Badge>

</div>

)

}

Preview

Examples

tsx

import React from 'react'

import {Badge} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  )
}

Description

A default badge with primary styling

tsx

import React from 'react'

import {Badge} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  )
}

Description

A secondary badge with muted styling

tsx

import {Badge} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return <Badge variant="secondary">Secondary</Badge>
}

Description

A destructive badge for warnings or errors

tsx

import {Badge} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return <Badge variant="destructive">Destructive</Badge>
}

Description

An outline badge with border styling

tsx

import {Badge} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return <Badge variant="outline">Outline</Badge>
}

Was this page helpful?