ButtonGroup

Groups related Button immediate children into a visually joined cluster - adjacent borders collapse and the group's borderRadius rounds only its outer corners (the first/last buttons keep their...

Source

Groups related Button immediate children into a visually joined cluster - adjacent borders collapse and the group's borderRadius rounds only its outer corners (the first/last buttons keep their leading/trailing corners; every inner corner is squared). Broadcasts variant / color / size / disabled / fullWidth to children via ButtonGroupContext; explicit props on a child always win.

<ButtonGroup variant="contained" aria-label="Basic button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Examples

Default

const args: Partial<ButtonGroupProps> = { 'aria-label': 'Basic button group' }

<ButtonGroup {...args}>{buttons}</ButtonGroup>

Variants

<Flex flexDirection="column" gap={3} alignItems="center">
  {(['contained', 'outlined', 'text'] as const).map((variant) => (
    <ButtonGroup key={variant} variant={variant} aria-label={`${variant} button group`}>
      {buttons}
    </ButtonGroup>
  ))}
</Flex>

Sizes And Colors

<Flex flexDirection="column" gap={3} alignItems="center">
  <ButtonGroup size="sm" aria-label="Small button group">
    {buttons}
  </ButtonGroup>
  <ButtonGroup color="secondary" aria-label="Medium-sized button group">
    {buttons}
  </ButtonGroup>
  <ButtonGroup size="lg" aria-label="Large button group">
    {buttons}
  </ButtonGroup>
</Flex>

Radii

<Flex flexDirection="column" gap={3} alignItems="center">
  {borderRadiiTokens.map((radius) => (
    <ButtonGroup
      key={radius}
      borderRadius={radius}
      aria-label={`${radius} radius button group`}
    >
      {buttons}
    </ButtonGroup>
  ))}
</Flex>

Vertical

<ButtonGroup orientation="vertical" aria-label="Vertical button group">
  {buttons}
</ButtonGroup>

Full Width

<ButtonGroup fullWidth aria-label="Full-width button group">
  {buttons}
</ButtonGroup>