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

The textual content of the button.

icon

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

Use this prop to force a specific display mode.

Example:

<Button icon={<IconDownload />} label="Download" />

children

Having children on a Button will override label, icon, and display. It is generally not recommended but can be useful in some situtations.

mode

Set this property to the desired variant.

Example:

<Button mode="strong">Accept</Button>

size

Use this property to change the size of the button.

Example:

<Button size="small">Accept</Button>

wide

Set to true to obtain a button that expands horizontally.

Example:

<Button wide>Accept</Button>

Last updated