Skip to main content

Button

Examples

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>

onClick Handler


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

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


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

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


Code
<UnknownElementType block>
Block button
</UnknownElementType>

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>

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>

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

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"