Naughty Pterodactyl Maid

    @lightspeed/cirrus-button

    10.0.3 • Public • Published

    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>

    Keywords

    none

    Install

    npm i @lightspeed/cirrus-button

    DownloadsWeekly Downloads

    32

    Version

    10.0.3

    License

    MIT

    Unpacked Size

    37.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • ls-rothlis
    • kurt.bergeron
    • tombertrand
    • lightspeedhq
    • ls-guillaume-lambert
    • inooid
    • ls-frederic-bouchard
    • anomen