Tag

The <Tag> component is used to display a a category, a label, or a status.

Properties

Name
Default
Description
size
medium
The size of the tag. The accepted values are
  • x-small
  • small
  • medium
  • large
color
default
Color of the tag. The accepted values are
  • default
  • green
  • red
  • blue
  • orange
outline
false
Set to true to use the outline style.
fill
false
Used with outline. Set to true to use the outline fill style.
interactive
false
Set to true to make the tag interactive (hover effect and pointer cursor).
disabled
false
Set to true to disable the tag.
bg
Custom background color
fg
Custom text color

Default Style

<Tag>Default</Tag>
<Tag color="accent">Accent</Tag>
<Tag color="green">Green</Tag>
<Tag color="red">Red</Tag>
<Tag color="blue">Blue</Tag>
<Tag color="orange">Orange</Tag>
Default Accent Green Red Blue Orange

Outline style

<Tag outline>Default</Tag>
<Tag outline color="accent">Accent</Tag>
<Tag outline color="green">Green</Tag>
<Tag outline color="red">Red</Tag>
<Tag outline color="blue">Blue</Tag>
<Tag outline color="orange">Orange</Tag>
Default Accent Green Red Blue Orange

Outline fill style

<Tag outline fill>Default</Tag>
<Tag outline fill color="accent">Accent</Tag>
<Tag outline fill color="green">Green</Tag>
<Tag outline fill color="red">Red</Tag>
<Tag outline fill color="blue">Blue</Tag>
<Tag outline fill color="orange">Orange</Tag>
Default Accent Green Red Blue Orange

Sizes

<Tag size="x-small">Extra Small</Tag>
<Tag size="small">Small</Tag>
<Tag size="medium">Medium</Tag>
<Tag size="large">Large</Tag>
Extra Small Small Medium Large

Slots

Start and end slots can be used to add icons or other elements to the tag.

<Tag>
    <IconJournalText slot="start" size={12} />
    Draft
</Tag>
Draft Published Scheduled
Draft Published Scheduled
Draft Published Scheduled
Draft Published Scheduled 
<Tag>
    Loading<Loader size="small" slot="end" invert />
</Tag>
Loading

Interactive

Set the interactive property to true to add a hover effect and a pointer cursor.

<Tag interactive>Default</Tag>
<Tag interactive color="green">Green</Tag>
<Tag interactive color="red">Red</Tag>
<Tag interactive color="blue">Blue</Tag>
<Tag interactive color="orange">Orange</Tag>

<Tag interactive outline>Default</Tag>
<Tag interactive outline color="green">Green</Tag>
<Tag interactive outline color="red">Red</Tag>
<Tag interactive outline color="blue">Blue</Tag>
<Tag interactive outline color="orange">Orange</Tag>
Default Accent Green Red Blue Orange
Default Accent Green Red Blue Orange

Disabled

Set the disabled property to true to disable the tag.

<Tag disabled>Default</Tag>
<Tag disabled color="accent">Accent</Tag>
<Tag disabled color="green">Green</Tag>
<Tag disabled color="red">Red</Tag>
<Tag disabled color="blue">Blue</Tag>
<Tag disabled color="orange">Orange</Tag>

<Tag disabled outline>Default</Tag>
<Tag disabled outline color="green">Green</Tag>
<Tag disabled outline color="red">Red</Tag>
<Tag disabled outline color="blue">Blue</Tag>
<Tag disabled outline color="orange">Orange</Tag>
Default Accent Green Red Blue Orange
Default Accent Green Red Blue Orange

Custom colors

You can use the bg and fg properties to set custom background and text colors.

<Tag 
    bg="var(--green-light)" 
    fg="var(--green)"
>Custom</Tag>
Custom