Buttons
Use buttons to let users perform key actions tied to what they seeโsubmitting a form, opening a modal, or editing content. Keep the action clear and relevant, like showing an โEditโ button next to a user profile.
React
Button composes Chakra's Button component.
Variants
There are four variants available to indicate the type of associated action.
Color mode
The default color mode isย light, but you can toggle toย darkย for use on dark backgrounds.
ColorScheme
The only colorScheme currently in use in Bauhaus is danger. It is used to indicate a dangerous action.
Disabled
Set the 1isDisabled1 prop to deactivate the button.
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.
As a link
If the associated action is a navigation, consider using a Link
instead. If
you need it to look like a button, but it acts as a navigational link, you can
use as='a'
.
Loading (not updated for Bauhaus yet)
Set the isLoading
prop to convey that an action is processing.
React Native
Button is built with Tamagui and provides consistent styling across iOS and Android platforms.
Variant
There are five variants available to indicate the type of associated action.
<Button variant="primary">Primary</Button><Button variant="secondary">Secondary</Button><Button variant="glass">Glass</Button><Button variant="ghost">Ghost</Button><Button variant="danger">Danger</Button>
Size
Size is controlled via the size
prop and defaults to large
.
<Button size="small">Small</Button><Button size="large">Large</Button>
Disabled
Set the disabled
prop to disable the button.
<Button disabled variant="primary">Disabled<Button>
Loading
Set the loading
prop to show a loading spinner.
<Button loading variant="primary">LoadingButton>
Icons
Icons can be included either before or after the button text using the
iconBefore
and iconAfter
props.
<Button iconBefore="chevronLeft">Before</Button><Button iconAfter="chevronRight">After</Button>
Bootstrap
Buttons
Use the .btn
class and one of the btn-*
color scheme classes on a <button>
element.
Variants
Use btn-primary
or btn-secondary
.
Size
Size is applied via the .btn-[size]
class in addition to other .btn
classes.
The default is medium.