Button

A Button suggest a user action.

Color

import { Button } from 'react-breeze';

<Button>Button (Primary)</Button>
<Button color="secondary">Button (Secondary)</Button>
<Button color="success">Button (Success)</Button>
<Button color="info">Button (Info)</Button>
<Button color="warning">Button (Danger)</Button>
<Button color="danger">Button (Danger)</Button>

Outline

Buttons can have a different appearance if they're outlined.

<Button outline>Button (Primary)</Button>
<Button outline color="secondary">Button (Secondary)</Button>
<Button outline color="success">Button (Success)</Button>
<Button outline color="info">Button (Info)</Button>
<Button outline color="warning">Button (Danger)</Button>
<Button outline color="danger">Button (Danger)</Button>

Loading

Buttons can display a loader, useful when working with async actions (default or outline).

import { Button } from 'react-breeze';

<Button loading>Button (Primary)</Button>
<Button loading color="secondary">Button (Secondary)</Button>
<Button loading color="success">Button (Success)</Button>
<Button loading color="info">Button (Info)</Button>
<Button loading color="warning">Button (Warning)</Button>
<Button loading color="danger">Button (Danger)</Button>

<Button outline loading>Button (Primary)</Button>
<Button outline loading color="secondary">Button (Secondary)</Button>
<Button outline loading color="success">Button (Success)</Button>
<Button outline loading color="info">Button (Info)</Button>
<Button outline loading color="warning">Button (Warning)</Button>
<Button outline loading color="danger">Button (Danger)</Button>

Disabled

Buttons can have a disabled state, used to indicate they cannot be clicked (default or outline).

import { Button } from 'react-breeze';

<Button disabled>Button (Primary)</Button>
<Button disabled color="secondary">Button (Secondary)</Button>
<Button disabled color="success">Button (Success)</Button>
<Button disabled color="info">Button (info)</Button>
<Button disabled color="warning">Button (Warning)</Button>
<Button disabled color="danger">Button (Danger)</Button>

<Button outline disabled>Button (Primary)</Button>
<Button outline disabled color="secondary">Button (Secondary)</Button>
<Button outline disabled color="success">Button (Success)</Button>
<Button outline disabled color="info">Button (Info)</Button>
<Button outline disabled color="warning">Button (Warning)</Button>
<Button outline disabled color="danger">Button (Danger)</Button>

Properties

Button takes the same properties as a button, but can also be given:

Name	Type	Default	Required	Description
color	primary | secondary | success | info | warning | danger	primary		Set color
outline	boolean	false		Alternative appearance
loading	boolean	false		Show a loader instead of children
disabled	boolean	false		Change appearance and doesn't trigger onClick