{
  "title": "ButtonGroup",
  "description": "Joined buttons in a horizontal or vertical row — the segmented look without toggle semantics.",
  "url": "/docs/components/button-group",
  "since": "0.8.0",
  "tags": [
    "input"
  ],
  "platform": "both",
  "source": "---\ntitle: ButtonGroup\ndescription: Joined buttons in a horizontal or vertical row — the segmented look without toggle semantics.\nsince: 0.8.0\ntags: [input]\nplatform: both\ncategory: input\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"ButtonGroup\" />\n\n## At a glance\n\n- Visually joins multiple buttons into a single connected unit.\n- No toggle / selection semantics — for that, use `SegmentedControl`.\n- Supports `horizontal` (default) and `vertical` orientations.\n- Injects `data-position` (`first` / `middle` / `last`) on each child for\n  CSS-side radius stripping on web.\n\n> **v2 note:** Middle-button corner-radius adjustment is applied via\n> `data-position` CSS selectors on web. On native, the group renders with\n> standard per-button radius — this will be improved in a follow-up.\n\n## Preview\n\n<Preview name=\"button-group-basic\" />\n\n## Usage\n\n```tsx\nimport { Button, ButtonGroup } from '@nori-ui/core';\n\n// Horizontal (default)\n<ButtonGroup>\n  <Button variant=\"secondary\">Day</Button>\n  <Button variant=\"secondary\">Week</Button>\n  <Button variant=\"secondary\">Month</Button>\n</ButtonGroup>\n\n// Vertical\n<ButtonGroup orientation=\"vertical\">\n  <Button variant=\"secondary\">Top</Button>\n  <Button variant=\"secondary\">Middle</Button>\n  <Button variant=\"secondary\">Bottom</Button>\n</ButtonGroup>\n```\n\n## `orientation`\n\n| Value | Description |\n|-------|-------------|\n| `horizontal` (default) | Buttons laid out left-to-right |\n| `vertical` | Buttons laid out top-to-bottom |\n\n## `size`\n\nThe `size` prop is forwarded to each child Button to enforce a uniform size across\nthe group. Accepts the same values as `Button`'s `size` prop (`sm`, `md`, `lg`).\nOmit it to let each child Button use its own size.\n\n## Props\n\n<PropsTable component=\"ButtonGroup\" />\n"
}