Button

A clickable item that performs an action. Buttons are used to drive a user through a flow and, optionally, give them contextual information about the action they are about to take.

Polymorphic Component

By default, content is rendered inside a <button>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Default Button (Medium Primary)

<Button>Default</Button>

Brand

Primary

<Button buttonType="primary" state="brand" size="{small|medium|large}" disabled="{true|false}" icon="{iconName}">
  CTA
  <ButtonMeta>Meta primary</ButtonMeta>
</Button>

Secondary

<Button buttonType="secondary" state="brand" size="{small|medium|large}" disabled="{true|false}" icon="{iconName}">
  CTA
  <ButtonMeta>Meta secondary</ButtonMeta>
</Button>

Text

<Button buttonType="text" state="brand" size="{small|medium|large}" disabled="{true|false}" icon="{iconName}">
  CTA
  <ButtonMeta>Meta text</ButtonMeta>
</Button>

Brand Dark

Primary

<Button buttonType="primary" state="dark" size="{small|medium|large}" disabled="{true|false}" icon="{iconName}">
  CTA
  <ButtonMeta>Meta primary</ButtonMeta>
</Button>

Secondary

<Button buttonType="secondary" state="dark" size="{small|medium|large}" disabled="{true|false}" icon="{iconName}">
  CTA
  <ButtonMeta>Meta secondary</ButtonMeta>
</Button>

Text

<Button buttonType="text" state="dark" size="{small|medium|large}" disabled="{true|false}" icon="{iconName}">
  CTA
  <ButtonMeta>Meta text</ButtonMeta>
</Button>

Critical

Primary

<Button buttonType="primary" state="critical" size="{small|medium|large}" disabled="{true|false}" icon="{iconName}">
  CTA
  <ButtonMeta>Meta primary</ButtonMeta>
</Button>

Secondary

<Button buttonType="secondary" state="critical" size="{small|medium|large}" disabled="{true|false}" icon="{iconName}">
  CTA
  <ButtonMeta>Meta secondary</ButtonMeta>
</Button>

Text

<Button buttonType="text" state="critical" size="{small|medium|large}" disabled="{true|false}" icon="{iconName}">
  CTA
  <ButtonMeta>Meta text</ButtonMeta>
</Button>

Success

Primary

<Button buttonType="primary" state="success" size="{small|medium|large}" disabled="{true|false}" icon="{iconName}">
  CTA
  <ButtonMeta>Meta primary</ButtonMeta>
</Button>

Secondary

<Button buttonType="secondary" state="success" size="{small|medium|large}" disabled="{true|false}" icon="{iconName}">
  CTA
  <ButtonMeta>Meta secondary</ButtonMeta>
</Button>

Text

<Button buttonType="text" state="success" size="{small|medium|large}" disabled="{true|false}" icon="{iconName}">
  CTA
  <ButtonMeta>Meta text</ButtonMeta>
</Button>

Props

Name	Type	Default Value	Required	Description
buttonType	"text" | ButtonType | "primary" | "secondary"	ButtonType.Primary	No	Which type of button should be rendered?
flush	boolean	false	No	Render a text button with no padding?
icon	"head" | "circle" | "placeholder" | IconName | "accordion-caret-down" | "accordion-caret-up" | "amex" | "caret-down" | "check" | "dash" | "diners-club" | "discover" | ... 6 more ...		No	An icon to display within the button.
loading	boolean	false	No	Display the loading state?
size	"small" | "medium" | "large" | ButtonSize	ButtonSize.Medium	No	How large should the button be?
state	"critical" | "success" | ButtonState | "brand" | "dark"	ButtonState.Brand	No	Which color should the button be?

Enums

ButtonSize

Key	Value
Small	"small"
Medium	"medium"
Large	"large"

ButtonState

Key	Value
Brand	"brand"
Dark	"dark"
Critical	"critical"
Success	"success"

ButtonType

Key	Value
Primary	"primary"
Secondary	"secondary"
Text	"text"