Button Group ​

Button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.

Usage ​

<script lang="ts" setup>
import { Button, ButtonGroup } from '@returnless/focus-ui';
</script>

<template>
  <ButtonGroup>
    <Button variant="secondary">Cancel</Button>
    <Button variant="primary">Save</Button>
  </ButtonGroup>
</template>

Best practices ​

Button groups should:

• Only use buttons that follow the best practices outlined in the button component.
• Group together calls to action that have a relationship.
• Be used with consideration that too many calls to action can cause users to be unsure of what to do next.
• Be thoughtful about how multiple buttons will look and work on small screens.
• Only be used in groups of up to six buttons if the buttons contain an icon with no text.