@lightspeed/cirrus-button

Cirrus Button Component

Stats

StarsIssuesVersionUpdatedCreatedSize
@lightspeed/cirrus-button
10.0.33 years ago5 years agoMinified + gzip package size for @lightspeed/cirrus-button in KB

Readme

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>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.