Tags

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

1. Default state
   State visible before click.

2. 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.

3. Selected state
   State visible after click, for the filter tags only. This state isn't available for category and removable tags.

Anatomy

1. Container
   Tag containers hold all tag elements, and their size is determined by those elements and the spacings.

2. 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).

3. 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.

Sizes and colors

Configuration metadata

Selector: ds-tags

Class: DSTagsComponent

Use case example

Inputs

Outputs

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;
        }