block
boolean
If set to `false` component renders with `width : auto`, otherwise `width : full`.
A button but with secondary styling.
<UnknownElementType variant="textSecondary">A button</UnknownElementType>
A button but with tertiary styling.
<UnknownElementType variant="textTertiary">A button</UnknownElementType>
<UnknownElementType onClick={function noRefCheck() {}}>Button with onClick</UnknownElementType>
An <a>
is rendered if a href
is specified.
The button will take up all available space if block
is passed as true
.
<UnknownElementType block>Block button</UnknownElementType>
Show an icon at the end after the button contents
<UnknownElementTypeicon={<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.
<UnknownElementTypeicon={<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.
<Flex gap="4px"><UnknownElementTypeonClick={function noRefCheck() {}}>Click me to load something!</UnknownElementType><UnknownElementType onClick={function noRefCheck() {}}>Reset</UnknownElementType></Flex>
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"