Buttons trigger an action or event, such as submitting a form, opening a Dialog,
canceling an action, or performing a delete operation.
Design guidance When and how to use this Use a Button to allow a user to perform an action related to the content
currently displayed. For example, on a user profile page an "edit" button that
toggles an inline form for editing the profile content.
Attribute Usage Variant There are four variants in available to indicate the type of associated action. ColorScheme colorScheme="danger" is used to indicate a dangerous action ColorMode Used to indicate dark or light mode Disabled The disabled state is used to convey temporarily unavailable actions
React Button composes
Chakra's Button component
Variant There are four variants in available to indicate the type of associated action.
<Stack direction="row" spacing="300" alignItems="center" pl="200">
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="glass">Glass</Button>
<Button variant="ghost">Ghost</Button>
ColorScheme The only colorScheme currently in use in Bauhaus is danger
<Stack direction="row" pl="200" spacing="300">
<Button colorScheme="danger">Primary</Button>
ColorMode Default for colorMode is light, but you can also specify a dark mode for use
on dark backgrounds.
<Stack direction="row" bg="neutral.900" p="200" borderRadius="300">
<Button variant="primary" colorMode="dark">
<Button variant="secondary" colorMode="dark">
<Button variant="glass" colorMode="dark">
<Button variant="ghost" colorMode="dark">
Disabled Set the isDisabled prop to disable the button.
<Stack direction="row" spacing="300">
<Button isDisabled variant="primary">
<Button isDisabled variant="secondary">
<Button isDisabled variant="glass">
<Button isDisabled variant="ghost">
As a link If the action associated with an interaction is a navigation , consider using a
Link
<Stack direction="row" spacing="300" alignItems="center" pl="200">
<Button as="a" variant="primary" href="">
<Button as="a" variant="secondary" href="">
<Button as="a" variant="glass" href="">
<Button as="a" variant="ghost" href="">
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="row" spacing="300">
<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">
Loading (not updated for Bauhaus yet) Set the isLoading prop to convey that an action is processing.
<Stack direction="row" spacing="300">
<Button isLoading>Disabled</Button>
<Button isLoading variant="secondary">
<Button isLoading variant="glass">
<Button isLoading variant="ghost">
Bootstrap Use the .btn class and one of the btn-* color scheme classes on a <button>
element to make a Button .
<div class="hstack gap-200">
<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>
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="hstack gap-300">
<button type="button" class="btn btn-primary btn-shape-pill">Pill</button>
<button type="button" class="btn btn-primary btn-shape-box">Box</button>
Fill Fill is applied via the .btn-[shape]-[color] instead of the standard
.btn-[color] classes.
<div class="hstack gap-300">
<button type="button" class="btn btn-primary">Solid</button>
<button type="button" class="btn btn-outline-primary">Outline</button>
<button type="button" class="btn btn-minimal-primary">Minimal</button>
Size Size is applied via the .btn-[size] class in addition to other .btn classes
and defaults to medium.
<div class="hstack gap-300">
<button type="button" class="btn btn-sm btn-primary">
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-lg btn-primary">Large</button>