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>
</Stack>

Color mode

The default color mode is light, but you can toggle to dark for use on dark backgrounds.

<Stack
  alignItems="center"
  bgColor="neutral.900"
  borderRadius="400"
  direction="column"
  padding="800"
  spacing="600"
>
  <Button variant="primary" colorMode="dark">
    Primary
  </Button>
  <Button variant="secondary" colorMode="dark">
    Secondary
  </Button>
  <Button variant="glass" colorMode="dark">
    Glass
  </Button>
  <Button variant="ghost" colorMode="dark">
    Ghost
  </Button>
</Stack>

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>
</Stack>

Disabled

Set the 1isDisabled1 prop to deactivate the button.

<Stack alignItems="center" direction="column" spacing="600">
  <Button isDisabled variant="primary">
    Primary
  </Button>
  <Button isDisabled variant="secondary">
    Secondary
  </Button>
  <Button isDisabled variant="glass">
    Glass
  </Button>
  <Button isDisabled variant="ghost">
    Ghost
  </Button>
  <Button colorScheme="danger" isDisabled>
    Danger
  </Button>
</Stack>

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</Button>
  <Button size="medium">Medium (Default)</Button>
  <Button size="large">Large (Deprecated)</Button>
</Stack>

Icons

Icons can be included either before or after the button text using the iconBefore and iconAfter props.

<Center>
  <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">
      Before
    </Button>
    <Button iconAfter={iconChevronRight} variant="secondary">
      After
    </Button>
  </SimpleGrid>
</Center>

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="">
    Primary
  </Button>
  <Button as="a" variant="secondary" href="">
    Secondary
  </Button>
  <Button as="a" variant="glass" href="">
    Glass
  </Button>
  <Button as="a" variant="ghost" href="">
    Ghost
  </Button>
</Stack>

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">
    Disabled
  </Button>
  <Button isLoading variant="glass">
    Disabled
  </Button>
  <Button isLoading variant="ghost">
    Disabled
  </Button>
</Stack>

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 medium.

Note: The large size is deprecated. Use medium instead.

<Button size="small">Small</Button>
<Button size="medium">Medium</Button>

Disabled

Set the isDisabled prop to disable the button.

Note: The disabled prop is deprecated. Use isDisabled instead.

<Button isDisabled variant="primary">
  Disabled
</Button>

Loading

Set the isLoading prop to show a loading spinner.

Note: The loading prop is deprecated. Use isLoading instead.

<Button isLoading variant="primary">
  Loading
</Button>

Selected

Set the isSelected prop to render the button in a selected (pressed-on) state. This is the right prop for toggle-style buttons that persist a chosen state between presses, such as filter chips or segmented controls.

Selected styling (typically a ring or fill matching the active variant) is driven by the variant. aria-pressed is set automatically when isSelected is provided so assistive technologies announce the toggle state.

<Button isSelected variant="primary">
  Selected
</Button>

Full Width

Set the isFullWidth prop to make the button span the full width of its container.

<Button isFullWidth variant="primary">
  Full Width
</Button>

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">Primary</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-success">Success</button>
</div>

Variants

Use btn-primary or btn-secondary.

<div class="vstack gap-600 align-items-center">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
</div>

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">Small</button>
  <button type="button" class="btn btn-primary">Default</button>
  <button type="button" class="btn btn-lg btn-primary">Large</button>
</div>

Font Scaling (React Native)

Font Scaling

This component supports dynamic font scaling for accessibility, capped at 1.35x. See Typography — Font Scaling for details.

Breadcrumb

Center