Design System

FoundationComponentsEngineeringReleases
⌘K

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.

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>

Color mode

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 1isDisabled1 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>
</SimpleGrid>
</Center>

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

Copyright © 2025 Hover Inc. All Rights Reserved.