Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Tags

See deprecated code
expiry date: 30/04/2024

Tags allow users to make selections, filter content, or understand the categorisation of the content.

last modified: 01/01/1601 01:00:00

Types

Tags can be extended with several functionnalities:

Non-clickable tags

Use tags when content is mapped to multiple categories, and the user needs a way to differentiate between them.
This type of tags is only informative, so it's non-clickable.

Clickable tags

Use tags when content is mapped to multiple categories, and the user needs a way to differentiate between them.
This type of tags can be clickable to take the user to the category.

Filter tags

Filter tags allow the user to choose a single tag or multiple tags from a set of options. It's a method of filtering data, to show only items within that particular category.
Tags clearly delineate and display options in a compact area. They are a good alternative to toggle buttons, radio buttons, and single select menus.

Removable tags

Removable tags represent the options selected in a complexe filtering method. This type of filtering often contains several types of components such as radio bttons, checkboxes,... By clicking on the cross, the user removes this filter, also from the filter method.

Reset functionnality

A reset all filters functionnality can be add by using the reset action link.

States

Default state
State visible before click.
Hover/focused state
State visible when the cursor hovers the tag, if the tag is clickable (category and filter tags), or the cross to delete the selected options (removable tags). This state is also triggered by keyboard navigation or click.
Selected state
State visible after click, for the filter tags only. This state isn't available for category and removable tags.

Anatomy

Container
Tag containers hold all tag elements, and their size is determined by those elements and the spacings.
Label
Tag label is the most important element on a tag, as it indicates the category that will be selected (filter tag) or triggered (category tag) when clicked, or the selected option (removable tag).
Remove icon (removable tags only)
Tag can include a remove icon.

Best pratices

Placement

Do
In case of many tags, they are wrapped on multiple rows.

Don't
Tags can't horizontally scroll. All tags have to be always visible.

Filter tags

Do
Filter tags can be used as from 2 options. ilter tags are listed in multiple rows.

Don't
Filter tags shouldn't present only a single option.

last modified: 01/01/1601 01:00:00

Sizes and colors

last modified: 01/01/1601 01:00:00

Default (non-clickable) tags

To use tags, create a div with the rs-tags class containing un-ordered list then create your list elements with corresponding classes.

Razor

All @rsTags objects can receive all following parameters:

Name	Type	Description	Default value
dTagsList	dynamic	List of tags	.rsStd : new [] { new {label = "Tag 1", selected = false}, new {label = "Tag 2", selected = false}} .rsClickable : new [] { new {label = "A new hope", selected = false, link = ""}, new {label = "The empire strikes back", selected = true, link = ""}} If the link parameter is empty, your clickable tag will be a <button> , otherwise it will be a <a> . .rsRemovable : new [] { new {label = "A new hope"}, new {label = "The empire strikes back"}, new {label = "Return of the jedi"}}
sXtraClass	string	Extra class to `rs-tags-list` container	""

apple
banana
orange

Negative version

apple
banana
orange

Selected tags

Add the rs-selected class to your rs-tags-el to show it as selected item.

Accessibility

aria-selected="false" is added to each element to allow the reader to recognize the selection status. Turn it to true if it's a selected one.

A new hope
The empire strikes back
Return of the jedi

Negative version

A new hope
The empire strikes back
Return of the jedi

Clickable tags

In order to make the item clickable, Inside a list create a button with rs-tags-btn to rs-tags-el .

Accessibility

aria-pressed="true" is added to know which element is selected. Turn it to false if isn't a selected one.

Negative version

Removable tags

To add interactivity to the tags, you need to create a button following the name of the tag including the span with the corresponding classes

A new hope
The empire strikes back
Return of the jedi

Negative version

A new hope
The empire strikes back
Return of the jedi

Deprecated

EXPIRY DATE: 30/04/2024

The negative versions of tags below should no longer be used.
Simply add rs-neg as parent class of rs-tags .

Deprecated Class: rs-tags-neg

apple
banana
orange

last modified: 01/01/1601 01:00:00

Configuration metadata

Selector: ds-tags

Class: DSTagsComponent

Use case example

NOT AVAILABLE LIVE PREVIEW

Inputs

Name	Type	Default	Required	Description
options	ITagsOptions	undefined	Yes	Sets the options of the component
inputTagsContents	ITagsContents	undefined	Yes	Sets the content of the component
title	string	undefined	No	Set a title before the tags
reset	string	undefined	No	Show the reset button

Outputs

Name	Type	Description
tagsClicked	EventEmitter<string>	Emits the selected tag when clicked
tagsRemoved	EventEmitter<string>	Emits the tag which the user removed
resetClicked	EventEmitter<string>	Emits when reset. Doesn't reset the list internally

Models

        export interface ITagsOptions {
            negativeStyle?: boolean;
            isClickable?: boolean;
            isRemovable?: boolean;
            allowMulti?: boolean;
        }

        export interface ITagsContents {
            contents: Array<ITagsContent>;
            selectedTags?: ITagsContent;
            selectedTagsIds?: string[];
        }

        export interface ITagsContent {
            title: string;
            id: string;
        }