Button

Ah, the humble button!

label

string

required

size

"default" │ "small" │ "xsmall"

"default"

appearance

"default" │ "loading" │ "success" │ "danger" │ "disabled"

style

undefined │ object

{}

type

"primary" │ "secondary" │ "tertiary" │ "link"

"primary"

Sizes

Default

Small

xsmall

<Button size="default" label="Default" />
<StackSpacer />
<Button size="small" label="Small" />
<StackSpacer />
<Button size="xsmall" label="xsmall" />

<Button size="default" label="Default" />
<StackSpacer />
<Button size="small" label="Small" />
<StackSpacer />
<Button size="xsmall" label="xsmall" />

Appearance

Primary

Delete

Success

Disabled

<Button type="primary" label="Sign up" />
<StackSpacer />
<Button type="primary" label="Delete" appearance="danger" />
<StackSpacer />
<Button type="primary" label="Sign up" appearance="loading" />
<StackSpacer />
<Button type="primary" label="Success" appearance="success" />
<StackSpacer />
<Button type="primary" label="Disabled" appearance="disabled" />

<Button type="primary" label="Sign up" />
<StackSpacer />
<Button type="primary" label="Delete" appearance="danger" />
<StackSpacer />
<Button type="primary" label="Sign up" appearance="loading" />
<StackSpacer />
<Button type="primary" label="Success" appearance="success" />
<StackSpacer />
<Button type="primary" label="Disabled" appearance="disabled" />

Secondary

Delete

Success

Disabled

<Button type="secondary" label="Sign up" />
<StackSpacer />
<Button type="secondary" label="Delete" appearance="danger" />
<StackSpacer />
<Button type="secondary" label="Sign up" appearance="loading" />
<StackSpacer />
<Button type="secondary" label="Success" appearance="success" />
<StackSpacer />
<Button type="secondary" label="Disabled" appearance="disabled" />

<Button type="secondary" label="Sign up" />
<StackSpacer />
<Button type="secondary" label="Delete" appearance="danger" />
<StackSpacer />
<Button type="secondary" label="Sign up" appearance="loading" />
<StackSpacer />
<Button type="secondary" label="Success" appearance="success" />
<StackSpacer />
<Button type="secondary" label="Disabled" appearance="disabled" />

Tertiary

Delete

Success

Disabled

<Button type="tertiary" label="Sign up" />
<StackSpacer />
<Button type="tertiary" label="Delete" appearance="danger" />
<StackSpacer />
<Button type="tertiary" label="Sign up" appearance="loading" />
<StackSpacer />
<Button type="tertiary" label="Success" appearance="success" />
<StackSpacer />
<Button type="tertiary" label="Disabled" appearance="disabled" />

<Button type="tertiary" label="Sign up" />
<StackSpacer />
<Button type="tertiary" label="Delete" appearance="danger" />
<StackSpacer />
<Button type="tertiary" label="Sign up" appearance="loading" />
<StackSpacer />
<Button type="tertiary" label="Success" appearance="success" />
<StackSpacer />
<Button type="tertiary" label="Disabled" appearance="disabled" />

Link

Delete

Success

Disabled

<Button type="link" label="Sign up" />
<StackSpacer />
<Button type="link" label="Delete" appearance="danger" />
<StackSpacer />
<Button type="link" label="Sign up" appearance="loading" />
<StackSpacer />
<Button type="link" label="Success" appearance="success" />
<StackSpacer />
<Button type="link" label="Disabled" appearance="disabled" />

<Button type="link" label="Sign up" />
<StackSpacer />
<Button type="link" label="Delete" appearance="danger" />
<StackSpacer />
<Button type="link" label="Sign up" appearance="loading" />
<StackSpacer />
<Button type="link" label="Success" appearance="success" />
<StackSpacer />
<Button type="link" label="Disabled" appearance="disabled" />