Button

The most essential element of a user interface.

Sizes

Our buttons come in four different sizes: Small, Medium, Large & Extra Large. All buttons have a fixed height and padding unless stated differently inside the type

| Size | Usage | | ---- | ----- | | small | These little buttons are used in compact little spaces, e.g. inside the header of a card. | | large | The large button is mainly used inside an open but content-rich page with multiple actions. This large button also provides a large touchable area for use on touch screens. | | xlarge | When a single page has nothing going on but to promote a single thing with just one button, you should use the extra large button. This button is also great for fast pacing flows with a focus on touch screens. |

Styles

These are all the styles that are included in all button types (unless stated differently in the types section).

| Style | Usage | | ----- | ----- | | default | The neutral button is used for all generic actions. | | primary | There should only be one main action on the page. This action should always be a primary styled button. | | secondary | For subsequent actions that encourage our users to fill data like selecting a product. | | danger | For all actions that can be destructive, we use the danger styled button. |

Types

These are all the styles that are included in all button types (unless stated differently in the types section).

| Type | Usage | | ---- | ----- | | Outline| Our standard button is for all non-default styles the outline button can transform into a fill button to start encouraging interaction. | | Fill| When taking action is promoted/encouraged we use the fill button. The main CTA should always be a fill. Not available in default style. | | Icon + Text | Bringing visual context to what a button will do, can help the user understand and it manages expectations. When space is limited, but actions are required you might want to use an icon only button. | | Icon | A small, often square-shaped button with only an <Icon> for CTA. These should be avoided at all costs, unless when dealing with extremely standard usecases. Consider an Icon + Text button instead.

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>