Skip to main content

Label

Provide extra contextual meaning to things, like stateful information.

New

Basic usage

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

Helper options

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

OptionTypeDescription
labelstringThe text to display within the label
removableboolDisplays 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
{{
html.icon('application/msword', {
'label': 'Microsoft Word'
})
}}

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.

onlineoffline
Do use a descriptive text label
onlineonline
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.

warning

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.

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

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
{{
html.label({
'label': 'My Label',
'removable': true
})
}}