Tag

<BaseTag /> · An informative small piece of content.

Label

vue

<template>
  <BaseTag>
    Label
  </BaseTag>
</template>

Features

Can have different sizes
Supports custom colors

Anatomy

This component can have any content inside it. It is used to display an informative small piece of content.

vue

<template>
  <BaseTag>
    <!-- Your content here -->
  </BaseTag>
</template>

API Reference

This component has props that you can use to modify its visual style.

Prop	Type
`variant` default:`"default"`	`"default" \| "primary" \| "dark" \| "muted" \| "none"` The variant of the tag.
`size` default:`"sm"`	`"sm" \| "md" \| "lg"` The size of the tag.
`rounded` default:`"full"`	`"none" \| "sm" \| "md" \| "lg" \| "full"` The radius of the tag.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as` default:`"span"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Type
`#default`	`any`

Customization

Your can override the component default CSS variables in your main.css file.

css

@theme {
  /* Tag default variables */
  --color-tag-default-bg: var(--color-white);
  --color-tag-default-border: var(--color-muted-400);
  --color-tag-default-text: var(--color-muted-400);

  /* Tag muted variables */
  --color-tag-muted-bg: var(--color-muted-400);
  --color-tag-muted-border: var(--color-muted-400);
  --color-tag-muted-text: var(--color-muted-400);

  /* Tag dark variables */
  --color-tag-dark-bg: var(--color-muted-900);
  --color-tag-dark-border: var(--color-muted-900);
  --color-tag-dark-text: var(--color-muted-900);
}

Examples

Size

Use the size prop to change the size of the tag.

Label Label Label

vue

<template>
  <BaseTag size="sm">
    Label
  </BaseTag>
  <BaseTag size="md">
    Label
  </BaseTag>
  <BaseTag size="lg">
    Label
  </BaseTag>
</template>

Radius

Use the rounded prop to change the radius of the tag.

vue

<template>
  <BaseTag variant="default">
    Label
  </BaseTag>
  <BaseTag variant="muted">
    Label
  </BaseTag>
  <BaseTag variant="primary">
    Label
  </BaseTag>
  <BaseTag variant="dark">
    Label
  </BaseTag>
</template>

Variant

Use the variant prop to change the style of the tag.

Label Label Label Label

vue

<template>
  <BaseTag variant="solid" color="primary">
    Label
  </BaseTag>
  <BaseTag variant="pastel" color="primary">
    Label
  </BaseTag>
  <BaseTag variant="outline" color="primary">
    Label
  </BaseTag>
</template>

Custom variants

Set the variant prop to none to remove the default colors and apply your own.