Button Group
A collection of buttons grouped together for related actions enhancing UI organization.
Usage
import { ButtonGroup } from "@lemonsqueezy/wedges";<ButtonGroup>
<ButtonGroup.Item>Button</ButtonGroup.Item>
<ButtonGroup.Item>Button</ButtonGroup.Item>
</ButtonGroup>API Reference
ButtonGroup
Alternatively, ButtonGroup.Root can be used in place of this component. Besides all props from HTMLAttributes<HTMLDivElement>, ButtonGroup also includes these additional props:
| Prop | Value | Default |
|---|---|---|
disabled | boolean | false |
orientation | "horizontal" | "vertical" | "horizontal" |
size | "sm" | "md" | "md" |
ButtonGroup.Item
Includes all props from the Button component, with the exception of variant, shape, and size props.
The type ButtonGroupItemProps is defined as follows:
type ButtonGroupItemProps = Omit<
React.ComponentPropsWithoutRef<typeof Button>,
"variant" | "shape" | "size"
>;Available component props:
| Prop | Value | Default |
|---|---|---|
after | ReactElement<HTMLElement> | / |
asChild | boolean | false |
before | ReactElement<HTMLElement> | / |
destructive | boolean | false |
disabled | boolean | false |
isIconOnly | boolean | false |
Examples
The following examples shows different variants of the ButtonGroup component.
The following examples shows a combination of the ButtonGroup and Tooltip components.