Cirrus Group Component


8.0.83 years ago5 years agoMinified + gzip package size for @lightspeed/cirrus-group in KB



Group component bundles other components.


First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-group

Or using npm:

npm i -S @lightspeed/cirrus-group


Import required styles in your .scss:

@import '@lightspeed/cirrus-group/Group.scss';

React Component


Prop Type Description
className string Custom className to add in addition to the default ones
children * React.node The content of the group
type oneOf(['horizontal', 'vertical']) Group type (default: 'horizontal')
noSpacing boolean Removes the default spacing between items (default: false)
block boolean Children scales to parent width (default: false)
inputBlock boolean Children inputs scales to parent width (default: false)


Prop Type Description
children * React.node The content of the group addon
className string Custom className to add in addition to the default ones
align oneOf(['left', 'center', 'right']) Aligns the text rendered element (default: left)
verticalAlign oneOf(['top', 'middle', 'bottom']) Vertically aligns the text rendered element (default: middle)


import React from 'react';
import Group, { GroupAddon } from '@lightspeed/cirrus-group';
import Button from '@lightspeed/cirrus-button';

const MyComponent = () => (
      <Button>first button</Button>
      <Button>second button</Button>
      <Button>third button</Button>

export default MyComponent;

CSS Component

Component classes

Type Class
base .cr-group
no spacing .cr-group--no-spacing
block .cr-group--block
vertical .cr-group--vertical
item .cr-group__item
addon .cr-group__item--addon
addon content .cr-group-addon__content
addon content alignment `.cr-group-addon__content--{left
addon content vertical alignment `.cr-group-addon__content--{top
input blocks .cr-group__item--input-block

Component HTML

<div class="cr-group cr-group--vertical cr-group--no-spacing">
  <div class="cr-group__item">
    <button type="button" class="cr-button">first button</button>
  <div class="cr-group__item">
    <button type="button" class="cr-button">second button</button>
  <div class="cr-group__item">
    <button type="button" class="cr-button">third button</button>
  <div class="cr-group__item cr-group__item--addon">
    <div class="cr-group-addon__content cr-group-addon__content--left  cr-group-addon__content--center">
      Footer text

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.