Tags
import { Tags } from '@enmovil/ui-design-system';
A small tag that shows a label with an optional status icon, such as a check, clock or close icon, chosen with iconType.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
label | string | Yes | — | — | Text inside the tag |
iconType | string | No | 'none' | 'none', 'check', 'sync', 'close', 'exclamation', 'clock', 'minus' | Optional icon to display in the tag |
color | LiteralUnion<"success" | "error" | "default" | "processing" | "warning" | PresetColorType> | No | — | 'success', 'processing', 'error', 'warning', 'default' | Color theme of the tag |
closable | boolean | ({ closeIcon?: ReactNode; disabled?: boolean; } & AriaAttributes) | No | — | — | Shows a close icon on the tag. Clicking it hides the tag and fires onClose. |
Other attributes
Tags passes 277 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onClose | ((e: MouseEvent<HTMLElement, MouseEvent>) => void) | Fires when the close icon is clicked. Requires closable. Call event.preventDefault() to keep the tag visible. |
onClick | MouseEventHandler<HTMLSpanElement> | Fires when the tag is clicked. |
onMouseEnter | MouseEventHandler<HTMLSpanElement> | Fires when the pointer enters the tag. |
onMouseLeave | MouseEventHandler<HTMLSpanElement> | Fires when the pointer leaves the tag. |
Children
Tags does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.
Loading playground…
Storybook
Open Tags in Storybook to try every story with the full set of controls.