Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Button Group

A ButtonGroup gathers multiple buttons at once, providing them with the correct spacing depending on the context.

GitHub

Examples

A simple example

<ButtonGroup>
  <Button variant="primary">One button</Button>
  <Button variant="secondary">Another button</Button>
</ButtonGroup>

A simple button group disabled

<ButtonGroup disabled>
  <Button>One button</Button>
  <Button>Another button</Button>
</ButtonGroup>

A Button Group with the same size

<ButtonGroup>
  <Button variant="primary" size="lg">One button</Button>
  <Button variant="secondary" size="lg">Another button</Button>
</ButtonGroup>

A Button Group with same variant 

<ButtonGroup>
  <Button variant="tertiary">One button</Button>
  <Button variant="tertiary">Another button</Button>
</ButtonGroup>

A Button group with same variant attached

<ButtonGroup attached>
  <Button>One button</Button>
  <Button>Another button</Button>
</ButtonGroup>

A Button Group where the buttons are "stuck" to each other 

<ButtonGroup attached={true}>
  <IconButton 
    variant="primary" 
    icon={< EditOutline18Icon />}
    aria-label="Edit"
    size="md"
  />
  <IconButton 
    variant="primary" 
    icon={< DeleteOutline18Icon />}
    aria-label="Delete"
    size="md"
  />
</ButtonGroup>

Guidelines

Button Group are used when buttons are used together to give the user alternative choices. Button Group are aligned horizontally or vertically.

Code

<ButtonGroup />

import { ButtonGroup } from "@vygruppen/spor-react";

Utility for grouping several buttons.

Props

Name
Type
Required?
Description
attachedbooleanAttaches buttons in the middle, making them look more pill-shaped
disabledbooleanDisables all buttons
growbooleanMake the children grow to fill the available space.