ButtonGroup

Shares variant, colorScheme, and size across child Buttons; optionally renders them as a single attached segmented surface.

stable
since v0.1.0
0.55 kB
forms
button

Preview

Open

tsx

import { Button, ButtonGroup } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <ButtonGroup aria-label="Document actions">
      <Button>Copy</Button>
      <Button>Paste</Button>
      <Button>Cut</Button>
    </ButtonGroup>
  );
}

Attached

Set attached to render the group as a segmented control — the buttons float as tiles inside a tinted, padded track (the same container NumberInput and ToggleGroup use).

Preview

Open

tsx

import { Button, ButtonGroup } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      <ButtonGroup attached aria-label="Range">
        <Button>Day</Button>
        <Button>Week</Button>
        <Button>Month</Button>
        <Button>Year</Button>
      </ButtonGroup>
      <ButtonGroup attached variant="outline" aria-label="Alignment">
        <Button>Left</Button>
        <Button>Center</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </div>
  );
}

Shared variant and size

variant, colorScheme, and size on the group flow to every child Button through context so a toolbar stays visually consistent with one declaration.

Preview

Open

tsx

import { Button, ButtonGroup } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
      <ButtonGroup variant="soft" colorScheme="accent" aria-label="Message actions">
        <Button>Reply</Button>
        <Button>Forward</Button>
        <Button>Archive</Button>
      </ButtonGroup>
      <ButtonGroup variant="outline" size="sm" aria-label="Small toolbar">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup variant="ghost" size="lg" aria-label="Large toolbar">
        <Button>Save</Button>
        <Button>Discard</Button>
      </ButtonGroup>
    </div>
  );
}

Per-button overrides

Props on a child Button always win over the group context — handy for highlighting the active item in a segmented control.

Preview

Open

tsx

import { Button, ButtonGroup } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <ButtonGroup variant="soft" colorScheme="neutral" aria-label="Inheritance demo">
      <Button>Inherits soft/neutral</Button>
      <Button colorScheme="success">Overrides color</Button>
      <Button variant="outline" colorScheme="danger">
        Overrides both
      </Button>
    </ButtonGroup>
  );
}

API

PropTypeDefaultDescription

variant

"solid"|"soft"|"outline"|"ghost"|"link"

—

Shared visual style for every nested `<Button>`. Individual buttons can still override by passing their own `variant` prop.

colorScheme

"accent"|"neutral"|"success"|"danger"|"warning"

—

Shared colour palette for every nested `<Button>`.

size

"xs"|"sm"|"md"|"lg"|"xl"

—

Shared size for every nested `<Button>`.

attached

boolean

—

When `true`, buttons render as a segmented control: tiles floating inside a tinted, padded track (the same container `NumberInput` and `ToggleGroup`'s attached bar use).

Accessibility

Wrapper is a div with role="group"; pass aria-label so assistive tech can describe what the group is for.
Children remain native <button> elements with their own focus, activation, and labels.
Use aria-pressed on child Buttons when emulating a segmented control with selection state.
attached is purely visual — it does not change keyboard or focus semantics.

Recipes

Pair attached with variant="outline" for a classic segmented-control look; the track supplies the frame, so buttons keep their own surface.
Mix in IconButton children for compact toolbars without breaking the shared variant.
For mutually exclusive selection, drive state in the parent and flip the active child’s variant.