Button
A simple Button component, available in different modes.
Even though
children
can be used to set its content, it is generally preferred to use label
and icon
. It will make it possible for the Button
to adapt in certain cases: for example, when used in the Header
component, it will automatically switch between a label and an icon, depending on the viewport size (except if display
is set to something else than auto
).function App() {
return <Button label="Click me" />
}

TYPE | DEFAULT VALUE |
---|---|
React node | None |
The textual content of the button.
TYPE | DEFAULT VALUE |
---|---|
React node | None |
The icon to incorporate in the button. When only an icon is desired, it is recommended to set a
label
with the display
prop set to "icon"
: the label will then be set on the title
attribute of the element.TYPE | DEFAULT VALUE |
---|---|
auto , all , icon or label | auto |
Use this prop to force a specific display mode.
<Button icon={<IconDownload />} label="Download" />
TYPE | DEFAULT VALUE |
---|---|
React node | None |
Having children on a
Button
will override label
, icon
, and display
. It is generally not recommended but can be useful in some situtations.TYPE | DEFAULT VALUE |
---|---|
normal , strong , positive , negative | normal |
Set this property to the desired variant.
<Button mode="strong">Accept</Button>
TYPE | DEFAULT VALUE |
---|---|
medium , small or mini | medium |
Use this property to change the size of the button.
<Button size="small">Accept</Button>
TYPE | DEFAULT VALUE |
---|---|
Boolean | false |
Set to true to obtain a button that expands horizontally.
<Button wide>Accept</Button>
Last modified 6mo ago