Skip to main content

ButtonGroup

Form Controls
Stable

Group of related buttons with connected styling and optional separators. Supports horizontal and vertical orientation.

Quick Import
Full Documentation
import { ButtonGroup } from "@cohere-ai/waypoint-ui/button-group";

Live Preview

Loading ButtonGroup...
Open in StorybookOpen in v0View Docs

Props

NameTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Layout direction
asChild (ButtonGroupText)booleanfalseRender ButtonGroupText as child element

Examples

Horizontal Button Group

Text formatting toolbar using a button group

1
import { ButtonGroup, ButtonGroupSeparator } from '@cohere-ai/waypoint-ui/button-group';
2
import { Button } from '@cohere-ai/waypoint-ui/button';
3
 
4
<ButtonGroup>
5
  <Button variant="outline">Bold</Button>
6
  <ButtonGroupSeparator />
7
  <Button variant="outline">Italic</Button>
8
  <ButtonGroupSeparator />
9
  <Button variant="outline">Underline</Button>
10
</ButtonGroup>

Vertical Button Group

Vertically stacked button group

1
import { ButtonGroup } from '@cohere-ai/waypoint-ui/button-group';
2
import { Button } from '@cohere-ai/waypoint-ui/button';
3
 
4
<ButtonGroup orientation="vertical">
5
  <Button variant="outline">Option A</Button>
6
  <Button variant="outline">Option B</Button>
7
</ButtonGroup>

Found an Issue?

If you've encountered a bug or have feedback about the ButtonGroup component, please report it to our team. Your feedback helps us improve Waypoint.

Available for all users • Issue will be created in Linear

Was this page helpful?

Your feedback helps us improve our documentation.

Need Help?

Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.