Tag
Tags represent a set of keywords that help label, categorize, and organize objects. Commonly used to signify the attributes of an object.
<sl-tag>Mathematics</sl-tag>
<sl-tag removable>History</sl-tag>
<sl-tag disabled removable>Science</sl-tag>When to use
Categorization, Labeling, and Filtering
Use tags to categorize and label course content, enhancing organization, discoverability, and enabling efficient filtering of content on a page, within components, or through search functionalities. For instance, courses or lessons can be tagged with subjects such as "Mathematics," "Science," "History," or "Literature." This approach makes it easier for users to quickly find and access relevant materials.
User-Generated Tags
Enable users to create and manage their own custom labels, allowing for a personalized organization system. In a student dashboard, for example, users might tag their notes or assignments with custom labels like "Exam Prep," "Homework," "Group Project," or "To Review," facilitating better organization.
When not to use
Status Indicators
For tracking the status of tasks or items, such as "In Progress," "Completed," or "Pending," use a badge instead. Badges are specifically designed to convey status and can provide visual cues through colors, making them more effective for this purpose.
Anatomy tag
| Item | Name | Description | Optional |
|---|---|---|---|
| 1 | Container | The container contains the label and close button | no |
| 2 | Label | The label is a brief text that decribed the tag | no |
| 3 | Close button | To remove the tag | yes |
Anatomy tag list
| Item | Name | Description | Optional |
|---|---|---|---|
| 1 | Counter | Displays the count of selected tags when not all tags are visible, with a maximum display of 99. If more than 99 tags are selected, it will be shown as "99+." | yes |
| 2 | List of tags | Consists of a collection of tags | no |
Figma Options
With these options, you can tweak the appearance of the tag in Figma. They are available in the Design Panel so you can compose the tag to exactly fit the user experience need for the use case you are working on.
Tag
| Item | Options | Description |
|---|---|---|
| Emphasis | subtle bold | Indicates the which emphasis the tag should have |
| State tag | idle hover active disabled | Indicates the state of the tag |
| State close | idle hover active disabled | Indicates the state of the close button |
| Size | md lg | Size 'md' is the default size of the tag component |
| Removable | boolean | Displays a close button |
| Label | value | The text of the label |
| Focus ring | boolean | To show the focus ring of the tag |
Tag list
| Item | Options | Description |
|---|---|---|
| Emphasis | subtle bold | Indicates the which emphasis the tag should have |
| Size | md lg | Indicates the size of the tag list |
| Items | 1 2 3 4 5 6 | Indicates how many tags are shown in the tag list |
| Stacked | boolean | Indicates if the tags are stacked, this will show a counter in front of the tag list |
<sl-tag-list stacked>
<sl-tag removable>Mathematics</sl-tag>
...
<sl-tag removable>English</sl-tag>
</sl-tag-list>Tag list API
Tag list component provides properties to define the experience in different use cases, and it is a kind of wrapper for multiple tags.
Properties
| Name | Attribute | Type | Default | Description |
|---|---|---|---|---|
emphasis | emphasis | 'subtle' | 'bold' | undefined | The emphasis of the tag-list and tags inside. Defaults to 'subtle'. | |
size | size | 'md' | 'lg' | undefined | The size of the tag-list (determines size of tags inside the tag-list). Defaults to `md`. | |
stacked | stacked | boolean | undefined | Whether there should be a stacked version shown when there is not enough space. The list doesn't wrap when `stacked` version is applied. |
Slots
| Name | Description |
|---|---|
default | The place for tags. |
Tag API
Tag has a range of properties to define the experience in different use cases.
Properties
| Name | Attribute | Type | Default | Description |
|---|---|---|---|---|
disabled | disabled | boolean | undefined | Whether the tag component is disabled, when set no interaction is possible. | |
emphasis | emphasis | 'subtle' | 'bold' | undefined | The emphasis of the tag; defaults to 'subtle'. | |
removable | removable | boolean | undefined | Whether the tag component is removable. | |
size | size | 'md' | 'lg' | undefined | The size of the tag. Defaults to `md`. |
Events
| Name | Event type | Description |
|---|---|---|
sl-remove | SlRemoveEvent | Emits when the tag is removed. |
Slots
| Name | Description |
|---|---|
default | The tag label. |
Keyboard interactions
Users can move through the tags within a tag-list using the arrow keys. You can navigate back to the previous tag with left or up. The focus indicator loops, so when you are at the last option and press down it will focus on the first tag. In the stacked version of tag-list, when there are hidden tags, you can navigate only through visible tags with arrow keys, and you can focus tag with amount of hidden tags by Tab key.
When you click on a tag inside a tag-list (as long as it is not disabled), the tag become the active spot for using the keyboard. This means you can start using keyboard navigation right from the tag you just clicked on.
When the tag is focused and is removable, it can be removed by Delete or Backspace keydown.
WAI-ARIA
WAI-ARIA Roles, States, and Properties for a tag and tag-list component provide essential information to assistive technologies and screen readers.
Tag
| Attribute | Value | Description | User supplied |
|---|---|---|---|
role | 'listitem', 'button' | Identifies the tag element as a listitem when it's used inside the sl-tag-list - this role is added automatically. Please provide a role button when the tag is interactive, is used to perform an action or is removable and not used inside sl-tag-list. | no/yes |
aria-label | string | Defines a string that labels the action that will be performed when the user interacts with the tag or the purpose/more information about the tag. Aria-label is added automatically in the removable tag to its button inside, used to perform a remove action, which contains only an icon. | yes/no |
aria-labelledby | string | Used to connect with a single header/element that describes the tag. | yes |
aria-describedby | string | Used to connect (and describe) with a tooltip which is shown, when there is not enough space to show the whole label in the tag. It contains id of the tooltip. It's added to a tag element when the label overflows. The tooltip contains the whole label of the tag (when the label inside a tag got ellipsis). | no |
Tag list
| Attribute | Value | Description | User supplied |
|---|---|---|---|
role | 'list' | Identifies the tag-list as a list. | no |
aria-label | string | String that labels the tag list. In a stacked version it is added automatically and contains an information about the amount of visible and hidden tags. In a non stacked version aria-label can be applied by a user. | no/yes |
aria-labelledby | string | Can be used to connect with a single header/element that describes the tag list. | yes |
aria-describedby | string | Used to connect (and describe) with a tooltip when there are hidden tags in stacked version, when there is not enough space to show all tags inside without wrapping. It contains id of the tooltip. It's added to a tag element which exists as a counter of hidden tags. | no |