ButtonComponents

Buttons serve a very specific UI purpose - which is to trigger actions. Buttons should not be used for navigation between pages. To users, a button should represent an action taken, such as moving to the next step in a multi-step process, opening a modal, or submitting a form.

Usage

Styles

Height

Use a Tall button for more visual weight. Use only when a button stands alone with ample surroundingwhitespace.

Inverted

Buttons are inverted purely for aesthetic purposes. Often used when a full colored button looks too heavy for a light, roomy layout.

Disabled

Disable a button when the state of the view renders a button's action invalid. It is suggested that text accompanies the button explaining the reason for the disabled state.

Dropshadow

In stand-alone flows that users will use infrequently to complete important tasks, using perspective creates a more engaging experience. Use dropshadows on buttons only when the button stands alone as the only action.

Link

Provides the least visual weight. Typically used for the negative, less common action such as Delete or Cancel. Should also be associated with navigation, such as closing a modal.

Types

Primary

The most common button type, this should be used for navigational actions such as moving on to the next panel in a multi-step process, or opening a modal.

Secondary

For use when two actions are presented next to each other, and one should receive less visual attention.

Success

Whenever a final, successful action is being taken, use a Successful button.

Warning

Always use when a button's action is potentially dangerous or has a negative connotation. Never use for aesthetics alone.

Danger

Use when an action is dangerous, irreversable and destructive. A common example is a "Delete" action.

Action

Use when an action is discrete and not associated with navigation. Examples would be "Download", or "Filter".

Info

When a button is associated with static content that may provide help information, use the Info style.

Properties

NameTypeDefaultDescription
type

One Of

'primary'

'secondary'

'default'

'success'

'info'

'action'

'warning'

'danger'

'primary' Sets the color of the button. For some types, other properties such as size are disabled.
size

One Of

'xlarge'

'large'

'medium'

'small'

'medium' Sets the width of the button.
height

One Of

'tall'

'standard'

'short'

'standard' When set to tall, button is rendered with a larger height.
link
bool
When True, button will be rendered in the style of a link.
heavy
bool
When True, button size is larger with heavier text.
invert
bool
When True, button's color scheme is inverted. Disables Dropshadow property.
active
bool
When True, button will be rendered in the active, or depressed state.
onClick
func
Function called when button is clicked.
disabled
bool
When true, button is set in disabled state.
dropshadow
bool
When true, button is rendered with dropshadow and hover animation.
className
string
icon
string
When a Font Awesome class name is provided (ex: "fa fa-check") this icon will be pre-pended to the text within the button and appropriately spaced.
label
string
When set, a Tooltip with the value will be rendered beneath the button on hover.