huntabyte__shadcn-svelte/docs/content/components/button-group.md

title, description, component, links

title	description	component	links
Button Group	A container that groups related buttons together with consistent styling.	true	source https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/button-group

<script> import ComponentPreview from "$lib/components/component-preview.svelte"; import ComponentSource from "$lib/components/component-source.svelte"; import PMAddComp from "$lib/components/pm-add-comp.svelte"; import PMInstall from "$lib/components/pm-install.svelte"; import Steps from "$lib/components/steps.svelte"; import InstallTabs from "$lib/components/install-tabs.svelte"; let { viewerData } = $props(); import Step from "$lib/components/step.svelte"; </script>

Installation

{#snippet cli()} {/snippet} {#snippet manual()}

Copy and paste the following code into your project.

{#if viewerData} {/if} {/snippet}

Usage

<script lang="ts">
  import * as ButtonGroup from "$lib/components/ui/button-group/index.js";
</script>

<ButtonGroup.Root>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup.Root>

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.

<ButtonGroup aria-label="Button group">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

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.

Size

Control the size of buttons using the size prop on individual buttons.

Nested

Nest ButtonGroup components to create button groups with spacing.

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.

Split

Create a split button group by adding two buttons separated by a ButtonGroupSeparator.

Input

Wrap an Input component with buttons.

Input Group

Wrap an InputGroup component to create complex input layouts.

Dropdown Menu

Create a split button group with a DropdownMenu component.

Select

Pair with a Select component.

Popover

Use with a Popover component.