Tag
Removable token for filters, selected options, and dismissible chips.
Quick Preview
Lekki
Verified
Usage
<Tag label="Lekki" onClose={removeTag} />Examples
Sizes and States
Use size, shape, border, clickable, and disabled to match tag density and behavior.
Small
Medium
Disabled
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
label | string | - | Visible tag text. |
size | `"sm" | "md" | "lg"` |
shape | `"full" | "box"` | "full" |
onClose | button click handler | - | Renders remove button. |
closeButtonProps | button props | - | Accessible props for the remove button, such as a custom aria-label. |
clickable | boolean | false | Applies interactive styling. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Use
closeButtonProps={{ "aria-label": "Remove bedroom filter" }}when the visible label alone is ambiguous. - If the user cannot remove the chip, use a Pill/Badge-style component instead of Tag.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.