# Button Group A container that groups related buttons together with consistent styling. ```svelte {#snippet child({ props })} {/snippet} Mark as Read Archive Snooze Add to Calendar Add to List Label As... Personal Work Other Trash ``` ## Installation ```bash pnpm dlx shadcn-svelte@latest add button-group ``` ```bash npx shadcn-svelte@latest add button-group ``` ```bash bun x shadcn-svelte@latest add button-group ``` ## Usage ```svelte ``` ## Accessibility - The `ButtonGroup` component has the `role` attribute set to `group` . - Use `tabindex` to navigate between the buttons in the group. - Use `aria-label` or `aria-labelledby` to label the button group. ```svelte ``` ## ButtonGroup vs ToggleGroup - Use the `ButtonGroup` component when you want to group buttons that perform an action. - Use the `ToggleGroup` component when you want to group buttons that toggle a state. ## Examples ### Orientation Set the `orientation` prop to change the button group layout. ```svelte ``` ### Size Control the size of buttons using the `size` prop on individual buttons. ```svelte

``` ### Nested Nest `ButtonGroup` components to create button groups with spacing. ```svelte ``` ### Separator The `ButtonGroupSeparator` component visually divides buttons within a group. Buttons with variant `outline` do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy. ```svelte ``` ### Split Create a split button group by adding two buttons separated by a `ButtonGroupSeparator`. ```svelte ``` ### Input Wrap an `Input` component with buttons. ```svelte ``` ### Input Group Wrap an `InputGroup` component to create complex input layouts. ```svelte {#snippet child({ props })} (voiceEnabled = !voiceEnabled)} size="icon-xs" data-active={voiceEnabled} class="data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100" aria-pressed={voiceEnabled} > {/snippet} Voice Mode ``` ### Dropdown Menu Create a split button group with a `DropdownMenu` component. ```svelte {#snippet child({ props })} {/snippet} Mute Conversation Mark as Read Report Conversation Block User Share Conversation Copy Conversation Delete Conversation ``` ### Select Pair with a `Select` component. ```svelte {currency} {#each CURRENCIES as currencyOption (currencyOption.value)} {currencyOption.value} {currencyOption.label} {/each} ``` ### Popover Use with a `Popover` component. ```svelte {#snippet child({ props })} {/snippet}

Agent Tasks