Badge

Badge is a stylish way of adding accessory context to your UI. It comes in four sizes and can be used with any of the color variants.

default badge

lg neutral badge

xs primary badge

Code Example

<Badge lg primary>text goes here</Badge>

Components

Badge is a standalone component.

The Badge component's styles and behavior can be customized with following props:

Prop	Type	Description
`color`	string	Sets the badge color to one of the below prop names.
neutral	boolean	Sets the color to neutral.
primary	boolean	Sets the color to primary.
secondary	boolean	Sets the color to secondary.
accent	boolean	Sets the color to accent.
info	boolean	Sets the color to info.
success	boolean	Sets the color to success.
warning	boolean	Sets the color to warning.
error	boolean	Sets the color to error.
`outline`	boolean	uses an outline style instead of background fill.
`ghost`	boolean	uses an ghost style instead of background fill.
`size`	string	sets the badge size to one of the below prop names.
`lg`	boolean	sets the badge size to `lg`.
`md`	boolean	sets the badge size to `md`.
`sm`	boolean	sets the badge size to `sm`.
`xs`	boolean	sets the badge size to `xs`.

Set the Badge color with one of the color props.

none

neutral

primary

secondary

accent

info

success

warning

error

Code Example

<Badge primary>On Sale</Badge>

Use the outline prop to give the Badge a border. You can also provide a color.

none

neutral

primary

secondary

accent

info

success

warning

error

Code Example

<Badge outline>Text</Badge>

Use the ghost prop to give the Badge a light background.

v1.1

Code Example

<Badge ghost>Text</Badge>

Set the Badge size with one of the size props.

v1.1

Code Example

<Badge lg>v1.1</Badge>

Here's an example of a Badge with a close button.

Category 1

Code Example

<Badge neutral>
  Category 1
  <Button ghost xs circle class="relative left-1">
    <Icon name="feather:x" />
  </Button>
</Badge>