@lightspeed/cirrus-button NPM

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>

@lightspeed/cirrus-icon @lightspeed/cirrus-spinner classnames

@everything-registry/sub-chunk-548 @zalastax/nolb-_lig @lightspeed/cirrus-dialog

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago