components / tag

Tag

Label for categories or filters, with an optional remove button.

How to use

`variant` is `filled` or `outline`. Passing `onDismiss` renders a real remove `<button>`; give each one a specific `dismissLabel` so screen readers tell them apart. For semantic status use `Badge`.

preview

DesignCode

ReactNext.jsTailwind

Tag.tsx

import { Tag } from "vaiperui";
 
<Tag>Design</Tag>
<Tag variant="outline">Code</Tag>
<Tag onDismiss={() => remove("React")} dismissLabel="Remove React">React</Tag>

Variants

preview

filled

outline

variants.tsx

<Tag>filled</Tag>
<Tag variant="outline">outline</Tag>

Colors

preview

primary

success

warning

danger

colors.tsx

<Tag variantColor="primary">primary</Tag>
<Tag variantColor="success">success</Tag>
<Tag variantColor="warning">warning</Tag>
<Tag variantColor="danger">danger</Tag>

Sizes

preview

sizes.tsx

<Tag size="sm">sm</Tag>
<Tag size="md">md</Tag>
<Tag size="lg">lg</Tag>

Custom color

preview

Orange

Violet

custom-color.tsx

<Tag customColor="#ff6600" />
<Tag customColor={{ light: "#a855f7", dark: "#fde047" }} />

Props

Prop	Values	Default	Description
variant	filled \| outline	filled	Tinted background or border only
variantColor	primary \| success \| warning \| danger	none	Color (neutral when omitted)
size	sm \| md \| lg	md	Size of the element and its text
radius	none \| sm \| md \| lg \| full	md	Corner rounding
customColor	string \| { light, dark }	none	Any CSS color (or a pair per theme) for the tag (overrides variantColor)
onDismiss	() => void	none	Renders a remove button that calls it
dismissLabel	string	Remove	Accessible name of the remove button
(native)	span	none	Every native prop of the element, className, ref, etc.