Button

Search…

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).
Usage
function App() {
  return <Button label="Click me" />
}
Demonstration
Props
label
TYPE
DEFAULT VALUE
React node
None
The textual content of the button.
icon
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.
display
TYPE
DEFAULT VALUE
auto, all, icon or label
auto
Use this prop to force a specific display mode.
Example:
<Button icon={<IconDownload />} label="Download" />
children
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.
mode
TYPE
DEFAULT VALUE
normal, strong, positive, negative
normal
Set this property to the desired variant.
Example:
<Button mode="strong">Accept</Button>
size
TYPE
DEFAULT VALUE
medium, small or mini
medium
Use this property to change the size of the button.
Example:
<Button size="small">Accept</Button>
wide
TYPE
DEFAULT VALUE
Boolean
false
Set to true to obtain a button that expands horizontally.
Example:
<Button wide>Accept</Button>

ACTIONS

ContextMenu

Last modified 2mo ago

Copy link

On this page

Usage

Demonstration

Props

Usage

Demonstration

Props

`label`

`icon`

`display`

Example:

`children`

`mode`

Example:

`size`

Example:

`wide`

Example: