Skip to main content

Button

Examples

Button

Rendered as a <button> by default.

Code
<UnknownElementType>
  A button
</UnknownElementType>

Secondary Button

A button but with secondary styling.

Code
<UnknownElementType variant="textSecondary">
  A button
</UnknownElementType>

Tertiary Button

A button but with tertiary styling.

Code
<UnknownElementType variant="textTertiary">
  A button
</UnknownElementType>

Disabled Button

Code
<UnknownElementType disabled>
  A button
</UnknownElementType>

Squared Buttons

A button with a reduced border radius (medium/6px) instead of the default rounded style by passing squared as true.

Code
<Stack
  atoms={{
    flexDirection: 'row',
    gap: '8px'
  }}
>
  <UnknownElementType squared>
    A button
  </UnknownElementType>
  <UnknownElementType
    squared
    variant="textSecondary"
  >
    A button
  </UnknownElementType>
  <UnknownElementType
    squared
    variant="textTertiary"
  >
    A button
  </UnknownElementType>
  <UnknownElementType
    disabled
    squared
  >
    A button
  </UnknownElementType>
</Stack>

onClick Handler

Code
<UnknownElementType onClick={function noRefCheck() {}}>
  Button with onClick
</UnknownElementType>

As Anchor

An <a> is rendered if a href is specified.

Code
<UnknownElementType href="/">
  Button as anchor
</UnknownElementType>

Block

The button will take up all available space if block is passed as true.

Code
<UnknownElementType block>
  Block button
</UnknownElementType>

With Icon

Code
<UnknownElementType icon={<ChatIcon />}>
  Chat
</UnknownElementType>

With Icon at End

Show an icon at the end after the button contents

Code
<UnknownElementType
  icon={<ChatIcon />}
  iconPosition="end"
>
  Chat
</UnknownElementType>

Icon Only

Only show an icon, only use when the icon is very clear by itself and always combine with a label for assistive devices.

Code
<UnknownElementType
  icon={<ChatIcon />}
  variant="icon"
>
  Chat
</UnknownElementType>

Loading

The button will take up all available space in place of the content if loading is passed as true and disables interaction.

Code
<Flex gap="4px">
  <UnknownElementType
    onClick={function noRefCheck() {}}
  >
    Click me to load something!
  </UnknownElementType>
  <UnknownElementType onClick={function noRefCheck() {}}>
    Reset
  </UnknownElementType>
</Flex>

Props

block

boolean

If set to `false` component renders with `width : auto`, otherwise `width : full`.

squared

boolean

If set to `true`, renders the button with a reduced border radius (medium/6px) instead of the default rounded style.

loading

boolean

If set to `true`, disables the button and shows a `Spinner` component in place of the child content.

variant

"icon" | "text" | "textSecondary" | "textTertiary"

Default: "text"

icon

ReactNode

iconPosition

"end" | "start"

Default: "start"