Button
Buttons allow users to perform an action or to navigate to another page / view. Buttons let users understand what will happen next.
Size
The Button
is available in two sizes, medium
is the default.
Weight
Reserve bold buttons for primary/important actions on a page or in a view. Subtle buttons should make up most of the interface, while a weight of "none" should be spared for subordinate actions.
Tone
The Button
has is available in three tones, active
is the default.
active
(default)critical
- not to be used when weight is "none"passive
- only to be used when weight is "none"
Active is the default tone, use this to let user know there’s an action they can perform to go to a new view or go to the next step in the flow.
Use the critical tone when an action has potentially destructive effects on the user‘s data (delete, remove, etc). If using the critical tone button as a standalone, we recommend styling it as a subtle button. Within a set, the danger button should be styled as a bold button.
Passive tone can only ever be used when weight is “none”. Always use this next to other buttons and never use it as standalone button.
Icons
Icons can be used in buttons when additional clarity is required and the icon is highly relevant to the action. Avoid using two icons in a button.
Use iconBefore to help the user learn about the action of the button quickly or to indicate the user will go back to previous step in the flow.
Use iconAfter to help the user learn if there is a change in the flow (open new tab or window for example) or to indicate the user will go to next step in the flow.
Disabled
When disabled the button is not interactive to the user.
Loading
Use the loading
property to indicate that an action is in progress. Note that
buttons are not interactive whilst loading.
Block
Use the block
property to make the button fill its container.
This is more commonly achieved by wrapping multiple buttons with the Stack
component,
which will automatically make the buttons fill their container.
IconButton
The icon button variant shares its rules regarding weight
, size
and
tone
with the standard button. For brevity we won't duplicate them here; refer
to the above documentation where applicable.
Required props
The IconButton
requires an icon
property, which must be a component from the
icon package.
A label
is required to support accessibility. Describe the action or effect
that will take place when the button is clicked.
Size
The IconButton
is available in two sizes, medium
is the default.
Weight
The IconButton
is available in three weights, bold
is the default.
Disabled
When disabled the button will not be interactive to the user.
Tone
The IconButton
is available in three tones, active
is the default.
ActionButton
Action buttons allow users to perform an action. They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
Weight
Where two or more actions are available you may want to emphasise one action
over others. Use the subtle
weight variant to drop the border.
Icons
Action buttons accept icons before and after the label.
Children
Provide arbitrary element(s) to the button. The icon*
and label
properties
will no-longer apply.
Button links
To have a link that looks like a button, use the as
prop to render an <a>
instead of a <button>
.
If you're doing client side routing using Next, use as={NextLink}
instead of as="a"
.
import { Button } from '@balance-web/button';import { NextLink } from '@balance-web/next-link';<Button as={NextLink} href="/" label="Button component a link" />;