button-group/usage

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

ButtonGroupText render prop with custom component

Use the render prop on ButtonGroupText to render a custom component. Example: <ButtonGroupText render={(props) => (<Label {...props} htmlFor="name">Text</Label>)} />. This example shows wrapping a Label component with the text.

Basic Button Group usage

To create a basic button group, wrap Button components inside a ButtonGroup component: <ButtonGroup><Button>Button 1</Button><Button>Button 2</Button></ButtonGroup>

Nested Button Groups

You can nest ButtonGroup components to create button groups with spacing and create complex layouts. Example: <ButtonGroup><ButtonGroup /><ButtonGroup /></ButtonGroup>

ButtonGroup with Input component

ButtonGroup can wrap an Input component to combine buttons with an input field.

ButtonGroup with InputGroup component

ButtonGroup can wrap an InputGroup component to create complex input layouts.

ButtonGroup with DropdownMenu

Create a split button group by combining ButtonGroup with a DropdownMenu component.

ButtonGroup with Select component

ButtonGroup can be paired with a Select component.

ButtonGroup with Popover component

ButtonGroup can be used with a Popover component.

ButtonGroup imports

Import ButtonGroup, ButtonGroupSeparator, and ButtonGroupText from '@/components/ui/button-group'.

ButtonGroup basic usage

Basic ButtonGroup usage wraps Button components: <ButtonGroup><Button>Button 1</Button><Button>Button 2</Button></ButtonGroup>

ButtonGroup vs ToggleGroup use case

Use ButtonGroup when grouping buttons that perform an action. Use ToggleGroup when grouping buttons that toggle a state.

ButtonGroup nesting

Nest ButtonGroup components to create button groups with spacing: <ButtonGroup><ButtonGroup /><ButtonGroup /></ButtonGroup>

ButtonGroupSeparator usage example

Use ButtonGroupSeparator between buttons: <ButtonGroup><Button>Button 1</Button><ButtonGroupSeparator /><Button>Button 2</Button></ButtonGroup>

ButtonGroupText with custom render example

Use the render prop to render a custom component: import { ButtonGroupText } from '@/components/ui/button-group'; import { Label } from '@/components/ui/label'; export function ButtonGroupTextDemo() { return (<ButtonGroup><ButtonGroupText render={<Label htmlFor="name" />}>Text</ButtonGroupText><Input placeholder="Type something here..." id="name" /></ButtonGroup>); }

Give your agent this brain