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.