Button

Buttons are the primary components for displaying actions on a page. They are often referenced as Call To Actions (CTA/C2A).

Filled button

Solid buttons are the main call to action on any page.

<Button variant="filled" color="primary">
  Filled action
</Button>

Color

Filled buttons are available in 4 colors: primary, success, warning and danger.

<Button variant="filled" color="primary">
  Primary Filled action
</Button>
<Button variant="filled" color="success">
  Success Filled action
</Button>
<Button variant="filled" color="warning">
  Warning Filled action
</Button>
<Button variant="filled" color="danger">
  Danger Filled action
</Button>

Outline button

Outline buttons are for secondary call to actions on any page.

<Button variant="outline" color="primary">
  Outline action
</Button>

Color

Outline buttons are available in 5 colors: primary, neutral, success, warning and danger.

<Button variant="outline" color="primary">
  Primary Outline action
</Button>
<Button variant="outline" color="neutral">
  Neutral Outline action
</Button>
<Button variant="outline" color="success">
  Success Outline action
</Button>
<Button variant="outline" color="warning">
  Warning Outline action
</Button>
<Button variant="outline" color="danger">
  Danger Outline action
</Button>

Ghost button

Ghost buttons are for miscellaneous actions on any page.

<Button variant="ghost" color="primary">
  Ghost action
</Button>

Color

Ghost buttons are available in three colors: primary, neutral and inverted.

<Button variant="ghost" color="primary">
  Primary Ghost action
</Button>

<Button variant="ghost" color="neutral">
  Neutral Ghost action
</Button>

<Button variant="ghost" color="inverted">
  Inverted Ghost action
</Button>

Disable state

<Button variant="filled" color="primary" disabled> Filled action </Button>
<Button variant="outline" color="primary" disabled>
  Outline action
</Button>
<Button variant="ghost" color="primary" disabled>
  Primary Ghost action
</Button>
<Button variant="ghost" color="neutral" disabled>
  Neutral Ghost action
</Button>

Sizes

<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<Button size="xlarge">Xlarge</Button>

Type

There are three types of buttons: submit, button and reset. By default, a button component has type="submit"

Label

Button components can have text added either between the button tags or through the label attribute.

<Button variant="primary" label="Primary"></Button>
<Button variant="outline" label="Outline"></Button>
<Button variant="ghost" label="Ghost"></Button>

<button> attributes

<button> HTML element attributes are directly usable with the Button component.

<Button
  label="Button with props"
  form="form-id"
  formaction="/submit"
  formmethod="get"
/>

Icons

Left icon

With icon properties

With Children

<Button label="Button" leftIcon="account_circle"></Button>
<Button>
  <Icon icon="account_circle"></Icon>
  <Typography>Button</Typography>
</Button>

Right icon

With icon properties

With Children

<Button label="Button" rightIcon="east"></Button>
<Button>
  <Typography>Button</Typography>
  <Icon icon="east"></Icon>
</Button>

Icon button

You can wrap any Icon with Button to generate an icon button:

<Button>
  <Icon icon="account_circle"></Icon>
</Button>

You can also import any icon that you need and wrap it with Button tag to adopt the styles and behavior:

<Button variant="ghost">
  <StorybookIcon width="24" height="24" />
</Button>

Custom icon

To select an appropriate icon, please consult the Icon component documentation.

Both the left icon and right icon can be either a string or having the following interface:

interface IconProps = {
  icon: string,
  classes?: string,
  lib?: IconLibType,
  size?: IconSizeType,
  variant?: IconVariantType,
};

With icon properties

With Children

<Button leftIcon={<Icon icon="applied_settings" lib="business" />} label="Button"></Button>
<Button>
  <Icon icon="applied_settings" lib="business"></Icon>
  <Typography>Button</Typography>
</Button>

API

The Button component accepts all the props a standard <button> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.ButtonHTMLAttributes<HTMLButtonElement>. See more about supported HTML props in React's documentation.

Loading API documentation...