Label
Provide extra contextual meaning to things, like stateful information.
Basic usage
- Twig
- HTML
{{
html.label({
'label': 'New'
})
}}
<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.
- Twig
- HTML
{{
html.icon('application/msword', {
'label': 'Microsoft Word'
})
}}
<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.
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.
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.
- Twig
- HTML
{{
html.link({
'label': html.label({ 'label': 'My Label' }),
'href': '#example'
})
}}
<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.
- Twig
- HTML
{{
html.label({
'label': 'My Label',
'removable': true
})
}}
<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>