Skip to content
Vy logo
Components

Button Group

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

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>