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.


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: 21/03/2022 10:55:05


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.


  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.


  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


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

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

Filter tags

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

Filter tags shouldn't present only a single option.

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

Sizes and colors

last modified: 20/03/2024 15:00:14

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.


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.


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 .


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


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: 28/02/2024 15:30:08

Configuration metadata

Selector: ds-tags

Class: DSTagsComponent

Use case example



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


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


        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;