---
title: Badge
description: Displays a badge or a component that looks like a badge.
thumbnail:
  image: /previews/components/core/badge.jpeg
  video: /previews/components/core/badge.mp4
links:
  - label: Report an issue
    href: https://github.com/mehdibha/dotUI/issues/new/choose
  - label: Edit this page
    href: https://github.com/mehdibha/dotUI/tree/main/content/components/data-display/badge.mdx?plain=1
---

<ComponentPreview name="core/badge-default" preview={`<Badge>Badge</Badge>`} />

## Installation

<Tabs items={["CLI", "Manual"]}>
  <Tab value="CLI">
  
  ```package-install
npx dotui-cli@latest add badge
```

  </Tab>
  <Tab value="manual">
  
    <Steps>
      <Step>Copy and paste the following code into your project.</Step>
      <ComponentSource name="core/badge" />
      <Step>Update the import paths to match your project setup.</Step>
    </Steps>

  </Tab>
</Tabs>

## Options

### Variant

Use the `variant` prop to control the visual style of the `Badge`. The default variant is `primary`.

<ComponentPreview
  name="core/badge-variants"
  preview={`<Flex>
    <Badge variant="neutral">Neutral</Badge>
    <Badge variant="outline">Outline</Badge>
    <Badge variant="primary">Primary</Badge>
  </Flex>
  <Flex>
    <Badge variant="success">Success</Badge>
    <Badge variant="success-subtle">Success Subtle</Badge>
    <Badge variant="success-outline">Success Outline</Badge>
  </Flex>
  <Flex>
    <Badge variant="danger">Danger</Badge>
    <Badge variant="danger-subtle">Danger Subtle</Badge>
    <Badge variant="danger-outline">Danger Outline</Badge>
  </Flex>
  <Flex>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="warning-subtle">Warning Subtle</Badge>
    <Badge variant="warning-outline">Warning Outline</Badge>
  </Flex>
  <Flex>
    <Badge variant="accent">Accent</Badge>
    <Badge variant="accent-subtle">Accent Subtle</Badge>
    <Badge variant="accent-outline">Accent Outline</Badge>
  </Flex>`}
/>

### Size

Use the `size` prop to control the size of the `Badge`. The default variant is `sm`.

<ComponentPreview
  name="core/badge-sizes"
  preview={`<Badge variant="primary" size="sm">
    Small
  </Badge>
  <Badge variant="primary" size="md">
    Medium
  </Badge>
  <Badge variant="primary" size="lg">
    Large
  </Badge>`}
/>

### Icon

To add additional context for the `Badge`, use the `icon` prop to add an icon.

<ComponentPreview
  name="core/badge-icon"
  preview={`<Badge icon={<ShieldIcon />} size="sm">
    Badge
  </Badge>
  <Badge icon={<ShieldIcon />} size="md">
    Badge
  </Badge>
  <Badge icon={<ShieldIcon />} size="lg">
    Badge
  </Badge>`}
/>

## API Reference

Badge accepts all HTML `span` element props and the following:

| Prop      | Type                                                                                                                                                                                                                                       | Default     | Description                               |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | ----------------------------------------- |
| `neutral` | `"outline" \| "primary" \| "success" \| "success-subtle" \| "success-outline" \| "danger" \| "danger-subtle" \| "danger-outline" \| "warning" \| "warning-subtle" \| "warning-outline" \| "accent" \| "accent-subtle" \| "accent-outline"` | `"primary"` | The visual style of the badge.            |
| `size`    | `"sm" \| "md" \| "lg"`                                                                                                                                                                                                                     | `"sm"`      | The size of the badge.                    |
| `icon`    | `React.ReactNode`                                                                                                                                                                                                                          | -           | An icon to display before the badge text. |
