Label

Provide extra contextual meaning to things, like stateful information.

Example usage

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

See the Pen PzooGE by Pulsar (@pulsar) on CodePen.

Options

Styleguide

Labels are usually used to indicate a state and therefore should be past-participles or adjectives.

See the Pen GqRRXd by Pulsar (@pulsar) on CodePen.

Types

Labels accept the normal state variations through the class option.

{{ html.label({ 'label': 'primary', 'class': 'label--primary' }) }}
{{ html.label({ 'label': 'success', 'class': 'label--success' }) }}
{{ html.label({ 'label': 'warning', 'class': 'label--warning' }) }}
{{ html.label({ 'label': 'danger', 'class': 'label--danger' }) }}
{{ html.label({ 'label': 'info', 'class': 'label--info' }) }}
{{ html.label({ 'label': 'inverse', 'class': 'label--inverse' }) }}

See the Pen PzooGE by Pulsar (@pulsar) on CodePen.

Removable labels

Add 'removable': true to add a remove link after the label value. You'll need to wire up your own javascript to implement the behaviour.

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

See the Pen LZYYjb by Pulsar (@pulsar) on CodePen.

Labels with tooltips

You should keep labels short and concise, tooltips can be used to provide further meaning if required.

{{
    html.label({
        'label': '3 days ago',
        'class': 'label--primary',
        'tooltip_title': '4th July 2015 12:34pm',
        'tooltip_placement': 'right'
    })
}}

Large labels

{{
    html.label({
        'class': 'label--large'
        'label': 'biggy'
    })
}}

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

See the Pen yJLLEm by Pulsar (@pulsar) on CodePen.