Tag

Compact status chip with tones, custom colors, sizes, and a remove action.

When to use

Use Tag when you need compact status chip with tones, custom colors, sizes, and a remove action.

Import

TypeScript

import { Tag } from '@gzodo/ui'

Use Tag for a short status, a filter, or a label. Theme tones (danger, success, warning, pending, muted) pick a token. Any other color string is mixed into the surface. variant changes filled, outline, and ghost.

Examples

danger

success

warning

pending

muted

Tones, filled

Default variant is filled. The tone mixes the accent into the border, background, and text.

danger

success

warning

pending

muted

Tones, outline

Outline keeps a transparent background and a stronger border.

danger

success

warning

pending

muted

Tones, ghost

Ghost has no border. Hover adds a light wash of the accent.

#f50

#2db7f5

#87d068

#108ee9

#f50

#2db7f5

#87d068

#108ee9

Custom color

A CSS color that is not a tone is mixed with the text and border tokens. The same color works for filled, outline, and ghost.

xxs

xxl

Sizes

From xxs (14px) to xxl (30px). Default is md, 18px tall.

Default

Live

Custom

Rounded

rounded switches the chip to a pill radius.

Design

Review

Remove

action shows a close icon on hover and calls the function when it is clicked. The tag itself is not a button.

As a button

isButton renders a button and uses onClick. Use it for a selectable filter.

Tag

Property

Description

Type

Default

children

The label.

ReactNode

—

color

Theme tone or any CSS color.

TagColorTone | string

—

variant

Surface treatment.

'filled' | 'outline' | 'ghost'

'filled'

size

Height and font size.

'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'

'md'

rounded

Pill radius.

boolean

false

action

Remove handler. Shows a close icon on hover.

() => void

—

isButton

Render a button instead of a div.

boolean

—

onClick

Click handler when isButton is set.

() => void

—

className

Extra classes on the root.

string

—

Text

IconStatus