Tags

Filter tags provide a simple way to visualise where single or multiple selections have been made from a list of options. These are predominantly used in combination with filter menus and should be used only where necessary.


Once tags have been removed, reload page to reinstate tags.

Tag name Longer tag name Tag name
html
            <span class="rc-tag" data-js-tag="">
    Tag name
    <button class="rc-tag__close rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography" aria-label="Close"><span class="rc-screen-reader-text">Close</span></button>
</span>
<span class="rc-tag" data-js-tag="">
    Longer tag name
    <button class="rc-tag__close rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography" aria-label="Close"><span class="rc-screen-reader-text">Close</span></button>
</span>
<span class="rc-tag" data-js-tag="">
    Tag name
    <button class="rc-tag__close rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography" aria-label="Close"><span class="rc-screen-reader-text">Close</span></button>
</span>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo