---
title: Badge
description: >-
  A component for displaying status, categories, or labels with multiple visual
  variants.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/badge'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/badge.md'
---

# Badge

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

#### Props

* **asChild**

  **boolean**

  Render as child element instead of span

* **children**

  **React.ReactNode**

  Content to render inside

* **variant**

  **'primary' | 'secondary' | 'destructive' | 'outline' | 'none'**

  Visual style variant

Examples

## Preview

![badge](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/Badge-CoClgcIr.png)

### Examples

* ####

  ##### tsx

  ```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

  ```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

  ```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

  ```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

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

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

***