Button

Pulsar buttons to perform actions, submit forms and link to things. See the buttons and actions styleguide for more examples on how to properly label your buttons.

Example usage

{{
    html.button({ 
        'class': 'btn--primary',
        'label': 'Click Me!'
    })
}}

See the Pen docs - html - primary button by Pulsar (@pulsar) on CodePen.

Options

Option Type Description
class string A space separated list of class names
form string Specifies one or more forms this label belongs to
href string URL to use for link button types
id string A unique identifier, if required
label string The button label
type string Can be button (default), link, input, submit
data-* string Data attributes, eg: 'data-foo': 'bar'

Types

Where possible, you should use the default button type, but buttons can also be links or inputs.

{# Regular buttons offer the best browser support and can also contain icons and badges #}
{{
    html.button({ 
        'label': 'Button'
    })
}}

{# Input buttons can be used if you really, really need to #}
{{
    html.button({
        'label': 'Input Button',
        'type': 'input'
    })
}}

{# Submit buttons should only be used to submit forms #}
{{
    html.button({
        'label': 'Submit Button',
        'type': 'submit'
    })
}}

{# A link that looks like a button, and smells like a button #}
{{
    html.button({
        'label': 'Link Button',
        'type': 'link',
        'href': 'http://myurl.com'
    })
}}

See the Pen docs - html - button types by Pulsar (@pulsar) on CodePen.

Variations

Buttons accept the normal state variations through the class option

{# Default button #}
{{ html.button({ 'label': 'Default' }) }}

{# Visually highlight the main action the user should perform on a given UI #}
{{ html.button({ 'class': 'btn--primary', 'label': 'Primary' }) }}

{# Indicate a successful or positive action #}
{{ html.button({ 'class': 'btn--success', 'label': 'Success' }) }}

{# Indicates caution should be taken with this action #}
{{ html.button({ 'class': 'btn--warning', 'label': 'Warning' }) }}

{# Indicates a dangerous or potentially destructive action #}
{{ html.button({ 'class': 'btn--danger', 'label': 'Danger' }) }}

{# Contextual button for informational alert messages #}
{{ html.button({ 'class': 'btn--info', 'label': 'Info' }) }}

{# Indicates a major action, like locking content #}
{{ html.button({ 'class': 'btn--inverse', 'label': 'Inverse' }) }}

{# Deemphasise a button by stripping away most of the style #}
{{ html.button({ 'class': 'btn--naked', 'label': 'Naked' }) }}

See the Pen docs - html - button variations by Pulsar (@pulsar) on CodePen.

Disabled buttons

Adding the is-disabled class to a button will automatically add the disabled attribute to button, input and submit type buttons.

{{
    html.button({
        'label': 'Disabled Button',
        'class': 'is-disabled'
    })
}}

<!-- output -->
<button class="btn is-disabled" disabled>Disabled Button</button>

See the Pen docs - html - disabled button by Pulsar (@pulsar) on CodePen.

Adding tooltips to disabled buttons

The disabled parameter prevents mouse events from firing and stops tooltips from working entirely. The only way around this which works for all our supported browsers is to wrap the button in a containing div, and attach the tooltip to that element.

<div rel="tooltip" data-toggle="tooltip" title="My tooltip brings all the boys to the yard">
  {{ html.button({ ... }) }}
</div>

Form actions

The standard button pattern for forms is for the submit action to be a primary button, and the cancel action (if required) should be a naked button.

Delete buttons, if required, should be on the right hand side.

See the Pen docs - form actions buttons by Paul Stanton (@stanton) on CodePen.

results matching ""

    No results matching ""