--- title: Button storybookPath: forms-buttons-button--default isExperimentalPackage: true ---
npm install @spark-web/button---
title: Button
storybookPath: forms-buttons-button--default
isExperimentalPackage: true
---
Buttons are clickable elements that are used to trigger actions. They
communicate calls to action to the user and allow users to interact with pages
in a variety of ways. Button labels express what action will occur when the user
interacts with it.
Button tones can be broken up into two types; decorative and semantic.
For destructive actions like “delete” you should use the semantic tone ofcritical.
For buttons that have no semantic action type (more common on marketing pages)
use one of our decorative tones.
Defaults to primary.
``jsx live`
The appearance of the button can be customised with the prominence prop. Valid
options are: low and high.
Defaults to high.
`jsx live
const baseButtonTones = [
{ label: 'Primary', tone: 'primary' },
{ label: 'Secondary', tone: 'secondary' },
{ label: 'Neutral', tone: 'neutral' },
{ label: 'Positive', tone: 'positive' },
{ label: 'Critical', tone: 'critical' },
];
const extraButtonTones = [
{ label: 'Caution', tone: 'caution' },
{ label: 'Informative', tone: 'info' },
];
return (
{baseButtonTones.map(({ label, tone }) => (
))}
{baseButtonTones.concat(extraButtonTones).map(({ label, tone }) => (
))}
{baseButtonTones.concat(extraButtonTones).map(({ label, tone }) => (
))}
);
`
Button's are available in two size: medium and large.
Defaults to medium.
`jsx live`
Icons can be placed next to labels to both clarify an action and call attention
to a button.
`jsx live`
When using buttons that contain only an icon, you must provide a label for
users of assistive technology.
`jsx live`
Buttons have an optional loading prop to indicate that an action is in
progress. When this is true a spinner will be displayed.
Note: buttons will not be interative when loading is true.
`jsx live
const [loading, setLoading] = React.useState(false);
const toggle = event => setLoading(event.target.checked);
return (
);
`
The appearance of a button, with the semantics of a link — shares Button API,href
with the exception of vs onClick props.
`jsx live`
Unstyled button primitive that:
- Forwards the button ref
- Provides a default type of button (so it doesn't accidently submit forms ifonClick` from firing when disabled without disabling the button
left off)
- Prevents
- Forces focus of the underlying button when clicked (to address a bug in
Safari)