@lightspeed/cirrus-badge

7.0.0-beta.1 • Public • Published

Badge

Our basic badge component.

Installation

  1. Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
  1. Install the component library
yarn add @lightspeed/cirrus-badge
  1. Hook the <ThemeProvider> and the theme in your app.
// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
      {/* 
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      */}
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
      </ThemeProvider>
    );
  }
}
  1. Import { Badge } and use right away!

React Components

<Badge>

Prop Type Description
children React.ReactNode The content to display inside the button
type 'default', 'info', 'success', 'info', 'important', 'warning', 'danger' Style of badge
size 'small', 'medium' Change size of badge
bg string Custom background color. Accepts any valid CSS color, i.e: #000
color string Custom text color. Accepts any valid CSS color, i.e: #fff

<PillBadge>

extends <Badge>

Example

import React from 'react';
import { Badge, PillBadge } from '@lightspeed/cirrus-badge';

const MyComponent = () =>
  <div>
    <Badge>My Badge</Badge>
    <PillBadge>My PillBadge</PillBadge>
  </div>;

export default MyComponent;

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i @lightspeed/cirrus-badge

      Weekly Downloads

      14

      Version

      7.0.0-beta.1

      License

      MIT

      Unpacked Size

      34.1 kB

      Total Files

      13

      Last publish

      Collaborators

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