Pesto UI

Tag

A pill for a value the user already committed to — a keyword, a recipient, an applied filter — optionally dismissible.

tsx
import { Tag } from "@pestoui/core"

Variants

DefaultSecondaryInfoSuccessWarningDestructiveOutline

Sizes & leading mark

Two sizes. leading takes a dot, a mark or an avatar and is sized for you when it is a bare svg or img.

SmallDefaulttopicGeneratedLive

Dismissible

Passing onDismiss adds the trailing X. Name the value in dismissLabel — a row of tags all announcing “Remove” tells a screen reader nothing.

design-systemonboardingbillingresearch

Props

PropTypeDefaultDescription
variant"default" | "secondary" | "info" | "success" | "warning" | "destructive" | "outline""default"Tone of the pill.
size"default" | "sm""default"Height, padding and type size. Both stay pills.
leadingReact.ReactNode—Leading dot, mark or avatar. Bare svg / img children are sized for you.
onDismiss() => void—Adds the trailing X button. Its click is stopped from reaching the tag's own onClick.
dismissLabelstring"Remove"Accessible label for the X. Include the value being removed.
PreviousTabsNext Textarea

Pesto UI · 117 documented components