Proximus design system
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

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

last modified: 21/03/2022 10:55:05

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.

last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 08/09/2022 10:20:06

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

Non-clickable tags can be created using the @rsTags.rsStd() helper or @rsTags.rsNeg() for the negative version.

The list of tags should be passed as an object like this:

dTagsList dTagsList : new [] {new {label = "Tag 1", selected = false}, new {label = "Tag 2", selected = false}}
  • 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 .

You can also use the helper @rsTags.rsClickable() .

Accessibility

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

Razor

The list of tags should be passed as an object like this:

dTagsList dTagsList : new [] {new {label = "A new hope", selected = false, link = ""}, new {label = "The empire strikes back", selected = true, link = ""}}

If the link parameter stays as an empty string, your clickable tag will be a <button> , if anything is inside this string then it will be a <a> .

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

Razor

You can create those tag with the helper @rsTags.rsRemovable() , the list of tags should be passed as an object like this:

dTagsList dTagsList : new [] {new {label = "A new hope"}, new {label = "The empire strikes back"}, new {label = "Return of the jedi"}}
  • A new hope
  • The empire strikes back
  • Return of the jedi

Negative version

  • A new hope
  • The empire strikes back
  • Return of the jedi
last modified: 16/09/2022 12:45:14

Configuration metadata

Selector: lib-tags

Class: TagsComponent

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

Outputs

Name Type Description
tagsClicked EventEmitter<string> Emits the selected tag when clicked
tagsRemoved EventEmitter<string> Emits the tag which the user removed

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