Tag

Tags mission is to label, categorize, or organize items using keywords that describe them.

Filled Tags

Filled/Contained is the default style for the tags.

Default
Primary
Secondary
Success
Error
Warning
Info

Outlined Tags

Outlined tags offer an alternative style.

Default
Primary
Secondary
Success
Error
Warning
Info

With Leading Icon

Tag components can contain an icon. This is done by setting the icon property.

Filled
Outlined

Denser

To have denser tags, use the dense property.

Default
Primary
Secondary
Success
Error
Warning
Info

Removable Tags

To have removable tags, assign a callback to the onRemove property.

Default
Primary
Secondary
Success
Error
Warning
Info

API

Learn more about the properties and the customization points.

Usage

import Tag from "@sonnat/ui/Tag";


//or
import { Tag } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Tag Properties
NameTypeDefaultDescription
label
required		string-The content of the tag.
classNamestring-Append to the class names applied to the component so you can override or extend the styles.
variant"filled"
| "outlined"		"filled"The variant of the tag.
color"default"
| "primary"
| "secondary"
| "success"
| "error"
| "warning"
| "info"		"filled"The color of the tag.
iconnode-The leading icon element placed before the label.
densebooleanfalseIf true, will make the tag denser.
onRemovefunction-The callback fires when the tag's remove button is clicked.
Signature: function(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
  • The ref is forwarded to the root element.
  • Any other properties supplied will be provided to the root element.