Button
Buttons trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.
Design guidance
When and how to use this
Use a Button to allow a user to perform an action related to the content currently displayed. For example, on a user profile page an "edit" button that toggles an inline form for editing the profile content.
| Attribute | Usage |
|---|---|
| Variant | There are four variants in available to indicate the type of associated action. |
| ColorScheme | colorScheme="danger" is used to indicate a dangerous action |
| ColorMode | Used to indicate dark or light mode |
| Disabled | The disabled state is used to convey temporarily unavailable actions |
React
Button composes Chakra's Button component
Variant
There are four variants in available to indicate the type of associated action.
ColorScheme
The only colorScheme currently in use in Bauhaus is danger
ColorMode
Default for colorMode is light, but you can also specify a dark mode for use
on dark backgrounds.
Disabled
Set the isDisabled prop to disable the button.
As a link
If the action associated with an interaction is a navigation, consider using a Link instead. If you definitely need it to look like a button, but it acts as a link, you can use as="a"
Size
Size is controlled via the size prop and defaults to medium. The medium size
here correlates to the "small" size in Figma
Icons
Icons can be included either before or after the button text using the
iconBefore and iconAfter props.
Loading (not updated for Bauhaus yet)
Set the isLoading prop to convey that an action is processing.
Bootstrap
Use the .btn class and one of the btn-* color scheme classes on a <button>
element to make a Button.
Shape
Shape is applied via the .btn-shape-pill and .btn-shape-box classes in
addition to the other .btn classes and defaults to pill.
Fill
Fill is applied via the .btn-[shape]-[color] instead of the standard
.btn-[color] classes.
Size
Size is applied via the .btn-[size] class in addition to other .btn classes
and defaults to medium.