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