Button Group

Group related buttons together for logical interaction, such as selecting options or triggering actions within a specific context.

Overview

ButtonGroups create primary, secondary, and tertiary hierarchy among a collection of actions in a container or surface.

Back

Save

Delete

  import { ButtonGroup, ButtonGroupItem } from '@skiff-org/skiff-ui';

  <ButtonGroup>
    <ButtonGroupItem label='Next' onClick={()=>{}} />
    <ButtonGroupItem label='Back' onClick={()=>{}} />
    <ButtonGroupItem label='Close' onClick={()=>{}} />
  </ButtonGroup>

  <ButtonGroup>
    <ButtonGroupItem label='Save' onClick={()=>{}} />
    <ButtonGroupItem destructive label='Delete' onClick={()=>{}} />
  </ButtonGroup>

  <ButtonGroup iconOnly>
    <ButtonGroupItem label='Share' onClick={()=>{}} />
    <ButtonGroupItem label='Copy' icon={Icon.Copy} onClick={()=>{}} />
    <ButtonGroupItem label='Download' icon={Icon.Export} onClick={()=>{}} />
    <ButtonGroupItem label='More options' icon={Icon.OverflowH} onClick={()=>{}} />
  </ButtonGroup>

Layout

ButtonGroups can be arranged inline (default) or stacked. For narrow width containers can be set to take the full width.

Back

Save

Delete

Example: Full width ButtonGroups

  import { ButtonGroup, ButtonGroupItem, Layout } from '@skiff-org/skiff-ui';

  <ButtonGroup fullWidth>
    <ButtonGroupItem label='Next' onClick={()=>{}} />
    <ButtonGroupItem label='Back' onClick={()=>{}} />
    <ButtonGroupItem label='Close' onClick={()=>{}} />
  </ButtonGroup>

  <ButtonGroup fullWidth layout={Layout.STACKED}>
    <ButtonGroupItem label='Save' onClick={()=>{}} />
    <ButtonGroupItem destructive label='Delete' onClick={()=>{}} />
  </ButtonGroup>

ButtonGroup Properties

Name
children
Type
Array<ButtonGroupItem>
Description
Children button group elements
Name
size
Type
ButtonGroupSize
Description
The size of the Buttons.
Name
layout
Type
Layout
Description
The arrangement of the Buttons
Name
fullWidth
Type
boolean
Description
Whether Buttons take the full width of the container.
Name
iconOnly
Type
boolean
Description
Only display the icon for secondary buttons

ButtonGroupItem Properties