@lightspeed/cirrus-button

Button

The most essential element of a user interface.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-button

Or using npm:

npm i -S @lightspeed/cirrus-button

Usage

Import required styles in your .scss:

@import '@lightspeed/cirrus-button/Button.scss';

React Component

Props

Prop	Type	Description
children	React.ReactNode	The content to display inside the button
primary	boolean	Displays as success button
secondary	boolean	Displays as secondary button
danger	boolean	Displays as danger button
fill	boolean	Displays as fill button
size	enum['small', 'large', 'xlarge']	Sets the size of the button
block	boolean	Displays the button in full width
noSpacing	boolean	Remove default spacing between button children
disabled	boolean	Disables the button
loading	boolean	Displays the loading icon and disables the button
href	string	Creates a <a> link instead of a <button>
active	boolean	Displays the button in an active state
onClick	function	Callback when button is clicked
onFocus	function	Callback when button is focused
onBlur	function	Callback when button is blurred

Example

import React from 'react';
import Button from '@lightspeed/cirrus-button';

const MyComponent = () =>
  <div>
    <Button>My Button</Button>
  </div>;

export default MyComponent;

CSS Component

Classes

Besides the base class .cr-button you can use one of these classes:

Type	Class
primary	.cr-button--primary
secondary	.cr-button--secondary
danger	.cr-button--danger
fill	.cr-button--fill
block	.cr-button--block
noSpacing	.cr-button--no-spacing
small	.cr-button--small
large	.cr-button--large
xlarge	.cr-button--xlarge
disabled	.cr-button--disabled (only for links, use the disabled attribute on <button>)
loading	.cr-button--loading

The button contains a <span /> to vertically align the content:

Type	Class
content	.cr-button__content
loading	.cr-button__content--loading

Example

<button type="button" class="cr-button">
  <span class="cr-button__content">My Button</span>
</button>

<button type="button" class="cr-button cr-button--loading" disabled>
  <span class="cr-button__content cr-button__content--loading">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="cr-icon cr-icon-spinner cr-spinner" style="width: 1.125rem; height: 1.125rem;">
      <path class="cr-icon__base cr-icon__base-2" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-3A5 5 0 1 0 8 3a5 5 0 0 0 0 10z" opacity=".3"></path>
      <path class="cr-icon__base cr-icon__base-1" d="M8 13a1.5 1.5 0 0 1 0 3A8 8 0 0 1 .323 5.742a1.5 1.5 0 1 1 2.879.846A5 5 0 0 0 8 13z"></path>
    </svg>
  </span>
  <span class="cr-button__content">My Button</span>
</button>