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.
<Stack alignItems="center" direction="column" spacing="600" colorMode="dark">
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="glass">Glass</Button>
<Button variant="ghost">Ghost</Button>
ColorMode The default color mode is light, but you can toggle to dark for use on dark backgrounds.
<Button variant="primary" colorMode="dark">
<Button variant="secondary" colorMode="dark">
<Button variant="glass" colorMode="dark">
<Button variant="ghost" colorMode="dark">
ColorScheme The only colorScheme currently in use in Bauhaus is danger. It is used to indicate a dangerous action.
<Stack alignItems="center" direction="column" spacing="600">
<Button colorScheme="danger">Danger</Button>
Disabled Set the isDisabled prop to deactivate the button.
<Stack alignItems="center" direction="column" spacing="600">
<Button isDisabled variant="primary">
<Button isDisabled variant="secondary">
<Button isDisabled variant="glass">
<Button isDisabled variant="ghost">
<Button colorScheme="danger" isDisabled>
Size Size is controlled via the size prop and defaults to medium. The medium size here correlates to the 'small' size in Figma.
<Stack alignItems="center" direction="column" spacing="600">
<Button size="small">Small (Deprecated)</Button>
<Button size="medium">Medium (Default)</Button>
<Button size="large">Large</Button>
Icons Icons can be included either before or after the button text using the iconBefore and iconAfter props.
<SimpleGrid columns={2} gap="300" placeItems="center" width="fit-content">
<Button iconBefore={iconChevronLeft}>Before</Button>
<Button iconAfter={iconChevronRight}>After</Button>
<Button iconBefore={iconChevronLeft} variant="secondary">
<Button iconAfter={iconChevronRight} variant="secondary">
<Button iconBefore={iconChevronLeft} variant="glass">
<Button iconAfter={iconChevronRight} variant="glass">
<Button iconBefore={iconChevronLeft} variant="ghost">
<Button iconAfter={iconChevronRight} variant="ghost">
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'
<Stack alignItems="center" direction="column" spacing="600">
<Button as="a" variant="primary" href="">
<Button as="a" variant="secondary" href="">
<Button as="a" variant="glass" href="">
<Button as="a" variant="ghost" href="">
Loading (not updated for Bauhaus yet) Set the isLoading prop to convey that an action is processing.
<Stack alignItems="center" direction="column" spacing="600">
<Button isLoading>Disabled</Button>
<Button isLoading variant="secondary">
<Button isLoading variant="glass">
<Button isLoading variant="ghost">
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.
<div class="vstack gap-600 align-items-center">
<button type="button" class="btn btn-primary">
<button type="button" class="btn btn-warning">
<button type="button" class="btn btn-danger">
<button type="button" class="btn btn-success">
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.
<div class="vstack gap-600 align-items-center">
<button type="button" class="btn btn-primary btn-shape-pill">
<button type="button" class="btn btn-primary btn-shape-box">
Fill Fill is applied via the `.btn-[shape]-[color]` instead of the standard
`.btn-[color]` classes.
<div class="vstack gap-600 align-items-center">
<button type="button" class="btn btn-primary">
<button type="button" class="btn btn-outline-primary">
<button type="button" class="btn btn-minimal-primary">
Size Size is applied via the `.btn-[size]` class in addition to other `.btn` classes. The default is medium.
<div class="vstack gap-600 align-items-center">
<button type="button" class="btn btn-sm btn-primary">
<button type="button" class="btn btn-primary">
<button type="button" class="btn btn-lg btn-primary">