Tags

  • HTML/CSS Available
  • Web Component In Progress
  • Last Updated

    2.0.0

Tags provide contextualizing information, such as filtering criteria or object metadata.

Tag

Variations

Default

Use to display information that clarifies the content on the page, such as object metadata.

Default
Shared
<div class="mds-tag"> Shared </div>

Examples

Tags providing permission related information.
Tags marking the status of content.

Use to enable the tag text to navigate to other pages or additional information.

<a class="mds-tag mds-tag--link" href="#"> Alphabet Inc </a>
  • Never intermingle default and link tags.
  • Never use a link tag to trigger interactions other than navigating to other pages or additional information. Instead, use a Button.
  • Link tags can be used to allow users to navigate to view other objects which are similarly labelled.
A group of linked tags on the Morningstar Blog.

Dismissible

Use to enable tags to be removed.

Dismissible
Equity
<div class="mds-tag"> Equity <button class="mds-button mds-button--icon-only mds-tag--dismissible__button" type="button">
        <svg class="mds-icon mds-button__icon mds-button__icon--left">
            <use xlink:href="/icons/mds.svg#remove--s">
                <title>Dismiss Tag</title>
            </use>
        </svg>
    </button>
</div>
  • The dismissal action is tied only to the remove-s icon within the tag.
  • Dismissible tags can be used to represent removable filtering criteria.
Do use only default, or only dismissible tags within a single group.
Do use only default, or only dismissible tags within a single group.
Don‘t intermingle default and dismissible tags.
Don‘t intermingle default and dismissible tags.

Grouping

Apply the mds-tag-group class to a wrapping container to add $mds-space-1-x as right and bottom margin to each tag.

Small
Equity
Manager
Macro
Retirement
Fixed Income
Managed Investments
Medium
Equity
Manager
Macro
Retirement
Fixed Income
Managed Investments
<div class="mds-tag-group">
    <div class="mds-tag"> Equity </div>
    <div class="mds-tag"> Manager </div>
    <div class="mds-tag"> Macro </div>
    <div class="mds-tag"> Retirement </div>
    <div class="mds-tag"> Fixed Income </div>
    <div class="mds-tag"> Managed Investments </div>
</div>

Sizing

Sizing affects text size and internal padding. The default size is small, and you can use a modifier class to make the tag larger (mds-tag--medium).

Small (Default)
Shared
Medium
Shared
<div class="mds-tag"> Shared </div>
Do use the same tag size for adjacent tags.
Do use the same tag size for adjacent tags.
Don‘t display small and medium tags together in the same set.
Don‘t display small and medium tags together in the same set.

Guidelines

Use When

  • Showing information which helps a user make sense of content on the page, such as filter parameters or object metadata.

Don′t Use When

  • Creating an object whose primary function is triggering an interaction. Instead, use a Button.
  • Offering a description of an object that exceeds 3–5 words. Instead, consider using a Tooltip or Popover.

Visual Language

Behaviors

  • When removed, fade the tag out and relinquish its space. Remaining tags should then fill the space as appropriate.

Editorial

  • Strive for short tag labels that clearly describe an action.
  • Use title case and capitalize prepositions of four words or more.
  • Avoid tag labels longer than three to five words, particularly in responsive settings.
  • Always use consistent naming when using a tag to represent a parameter set somewhere else, i.e., if the filter setting is “Equity” the tag should read “Equity”.

Accessibility

  • Always use an Icon-Only Button for the dismiss action on a dismissible tag. This provides the required keyboard navigability.
    • Always include a title tag on the dismiss icon with appropriate text for screen readers like “Remove Tag” or “Dismiss Tag.” See the accessibility guidelines for MDS icons for more information.

Code Reference

CSS Class References

Class
Applies to
Outcome

mds-tag--medium

mds-tag

Increases text size and internal padding.

mds-tag--link

mds-tag

Adds Link styling to tag text.

mds-tag--is-dismissed

mds-tag

Dismisses the alert by animating a fade-out effect.

mds-tag-group

<div>

Initializes a wrapping container to properly space a group of tags.

©2018 Morningstar, Inc. All rights reserved. Terms of Use