Design System · Documentation → Components → Buttons

React

Button composes Chakra's Button component.

Variants

There are four variants available to indicate the type of associated action.

live

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

ColorMode

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

live

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

live

<Stack alignItems="center" direction="column" spacing="600">
  <Button colorScheme="danger">Danger</Button>
</Stack>

Disabled

Set the isDisabled prop to deactivate the button.

live

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

live

<Stack alignItems="center" direction="column" spacing="600">
  <Button size="small">Small (Deprecated)</Button>
  <Button size="medium">Medium (Default)</Button>
  <Button size="large">Large</Button>
</Stack>

Icons

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

live

<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>
    <Button iconBefore={iconChevronLeft} variant="glass">
      Before
    </Button>
    <Button iconAfter={iconChevronRight} variant="glass">
      After
    </Button>
    <Button iconBefore={iconChevronLeft} variant="ghost">
      Before
    </Button>
    <Button iconAfter={iconChevronRight} variant="ghost">
      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'

live

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

live

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

live

<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

live

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

live

<div class="vstack gap-600 align-items-center">
  <button type="button" class="btn btn-sm btn-primary">
    Small (Deprecated)
  </button>
  <button type="button" class="btn btn-primary">
    Default
  </button>
  <button type="button" class="btn btn-lg btn-primary">
    Large
  </button>
</div>

Breadcrumb

Center