Buttons

Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.

const Button = require('gitbook-styleguide/lib/Button');

Default buttons

Link button
<Button.Toolbar>
<Button>Button button</Button>
<Button href="#">Link button</Button>
</Button.Toolbar>

Sizes

Buttons are availables in multiples sizes: Large, Normal, Small and Extra-Small.
<Button.Toolbar>
<Button size="lg">Large button</Button>
<Button size="md">Normal button</Button>
<Button size="sm">Small button</Button>
<Button size="xs">Extra small button</Button>
</Button.Toolbar>

Styles

Buttons can be filled to indicate a more important action:
<Button.Toolbar>
<Button style="primary">Primary</Button>
<Button style="success">Success</Button>
<Button style="danger">Danger</Button>
<Button style="secondary">Secondary</Button>
<Button style="link">Link</Button>
<Button style="marketing-primary">Marketing</Button>
</Button.Toolbar>

Counts

Buttons with a count.
0
<Button.Group>
<Button onClick={event => this.setState({ count: this.state.count + 1 })}>
<Icon id="star" /> Star
</Button>
<Button href="#" style="count">{this.state.count}</Button>
</Button.Group>

States

Buttons can have different states:
Disabled Disabled
<Button.Toolbar>
<Button>Default</Button>
<Button active>Active</Button>
<Button disabled>Disabled</Button>

<Button style="primary">Default</Button>
<Button style="primary" active>Active</Button>
<Button style="primary" disabled>Disabled</Button>
</Button.Toolbar>

Labels

Buttons can have a label on hover:
Disabled
<Button.Toolbar>
<Button title="Label">Default</Button>
<Button title="Label" active>Active</Button>
<Button title="Label" disabled>Disabled</Button>
</Button.Toolbar>

Block buttons

Create block level buttons—those that span the full width of a parent:
<Button block style="primary">Primary block button</Button>
<Button block>Secondary button</Button>

Button groups

Have a hankering for a series of buttons that are attached to one another? Wrap them in a `Button.Group` and the buttons will be rounded and spaced automatically.
<Button.Toolbar>
<Button.Group>
<Button>Button</Button>
<Button>Button</Button>
</Button.Group>
<Button.Group>
<Button size="sm">Button</Button>
<Button size="sm">Button</Button>
</Button.Group>
</Button.Toolbar>

Justified Button groups

Button groups can be justified, to make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.
<Button.Group block>
<Button>Button</Button>
<Button>Button</Button>
</Button.Group>