block
boolean
If set to `false` component renders with `width : auto`, otherwise `width : full`.
A button but with secondary styling.
<Button variant="textSecondary">A button</Button>
An <a>
is rendered if a href
is specified.
The button will take up all available space if block
is passed as true
.
<Button block>Block button</Button>
Show an icon at the end after the button contents
<Buttonicon={<ChatIcon />}iconPosition="end">Chat</Button>
Only show an icon, only use when the icon is very clear by itself and always combine with a label for assistive devices.
<Buttonicon={<ChatIcon />}variant="icon">Chat</Button>
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"
Default: "text"
icon
ReactNode
iconPosition
"end" | "start"
Default: "start"