Button

Flat. Bordered. No shadows. Primary for the one important action on a page, ghost for everything else.

Variants

primary / ghost / danger

<Button variant="primary">Save</Button>
<Button variant="ghost">Cancel</Button>
<Button variant="danger">Delete</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

With Icons

<Button leadingIcon={<Plus />}>New</Button>
<Button variant="ghost" trailingIcon={<Chevron />}>Back</Button>

Icon-Only

<IconButton label="Add"><Plus /></IconButton>

Disabled

<Button disabled>Can't Click</Button>
<Button variant="ghost" disabled>Can't Click</Button>

Interactive

<Button onClick={() => alert("hi")}>Say Hi</Button>