Label

Provide extra contextual meaning to things, like stateful information.

New

Basic usage

Twig

{{
    html.label({
        'label': 'New'
    })
}}

HTML

  <span className="label">New</span>

Helper options

You can configure this helper using the common helper options, the following options are specific to this helper.

Option	Type	Description
label	string	The text to display within the label
removable	bool	Displays a remove button at the end of the label

Mime type icons

The icon helper can take a standard mime type string to make it easier to illustrate certain file types.

Microsoft Word

Twig

{{
    html.icon('application/msword', {
        'label': 'Microsoft Word'
    })
}}

HTML

<i className="icon-file-word-o"><span className="hide">Microsoft Word</span></i>

Accessibility

You should not rely on colour alone to convey meaning. This will ensure you're meeting the requirements for WCAG at AA level. Make sure your text labels are descriptive, or add additional context with a visually hidden label.

online offline

Do use a descriptive text label

online online

Don’t rely on colour to convey meaning

Linked labels

A label can be used as the label for a link. Be careful using link labels as they don’t offer the same visual affordances as regular links or buttons, and avoid using link labels and non-link labels in close proximity.

danger

Be careful using link labels as they don’t offer the same visual affordances as regular links or buttons, and avoid using link labels and non-link labels in close proximity.

My Label

Twig

{{
    html.link({
        'label': html.label({ 'label': 'My Label' }),
        'href': '#example'
    })
}}

HTML

<a href="#example"><span className="label">My Label</span></a>

Removable labels

Adding the removable option to the Twig helper adds data-action="remove" data-action-target="this" attributes to the markup, which can use used as a hook for your own javascript.

My Label

Twig

{{
    html.label({
        'label': 'My Label',
        'removable': true
    })
}}

HTML

<span class="label label--removable"><span class="label__text">My Label</span><button type="button" data-action="remove" data-action-target="this" class="btn remove-button"><i class="icon-remove-sign"><span class="hide">Remove My Label</span></i></button></span>