Button
Buttons allow users to perform an action or to navigate to another page / view.
import { ActionButton, DeprecatedButton, DeprecatedIconButton, buttonWeightValues, buttonSizeValues, buttonToneValues } from '@balance-web/button-deprecated';The
DeprecatedButtonpackage has been deprecated and will be removed in a future version. Use Button instead. There is a migration guide at the bottom of the page.
Button
Size
The Button is available in two sizes, medium is the default.
Weight
Tone
The Button has is available in three tones, active is the default.
Icons
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
Weight
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.
Icon only action button
We can use the children support to render an icon only action button.
NOTE: You must provide aria-label to the button in order for it to be accessible to screen readers.
Button links
To have a link that looks like a button, use the as prop to render an <a> instead of a <button>.
Migration guide
Below is a mapping from DeprecatedButton to the new Button component. This mapping is about the tone and weight props on DeprecatedButton to colorScheme and variant props on Button. All other props should behave the same.
If this mapping doesn't cover a particular scenario, talk to a design.