// Generated by scripts/generate-showcase.mjs. Do not edit directly. page ButtonGroupDetail { layout = "showcase" state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"label\": \"Profile\",\n \"value\": \"profile\"\n },\n {\n \"label\": \"Settings\",\n \"value\": \"settings\"\n },\n {\n \"label\": \"Messages\",\n \"value\": \"messages\"\n }\n]" state playground_value = ctx.url.searchParams.get("pg_value") ?? "profile" state playground_size = ctx.url.searchParams.get("pg_size") ?? "md" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "outline" state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" state playground_responsive = ctx.url.searchParams.get("pg_responsive") ?? "false" state playground_attached = ctx.url.searchParams.get("pg_attached") ?? "true" state playground_selectable = ctx.url.searchParams.get("pg_selectable") ?? "true" state playground_toolbar = ctx.url.searchParams.get("pg_toolbar") ?? "false" state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Button group" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Button Group" description = "Theme-aware, responsive button group component." } view {
Base component

Button Group

Theme-aware, responsive button group component.

13 props1 slots3 eventsTheme readyResponsive
Interactive playground

Configure Button Group

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<ButtonGroup
  items='[
    {
      "label": "Profile",
      "value": "profile"
    },
    {
      "label": "Settings",
      "value": "settings"
    },
    {
      "label": "Messages",
      "value": "messages"
    }
  ]'
  value="profile"
  variant="outline"
  selectable="true"
/>
Component props13 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Example

Group related actions into one compact, visually connected control.

01
Live preview
Component usage.wrn
<ButtonGroup
  items='[
    {
      "label": "Profile",
      "value": "profile"
    },
    {
      "label": "Settings",
      "value": "settings"
    },
    {
      "label": "Messages",
      "value": "messages"
    }
  ]'
  value="profile"
  variant="outline"
  selectable="true"
/>
Sizes

Small

Use small grouped buttons in dense toolbars, tables, and utility surfaces.

02
Live preview
Component usage.wrn
<ButtonGroup
  items='[
    {
      "label": "Profile",
      "value": "profile"
    },
    {
      "label": "Settings",
      "value": "settings"
    },
    {
      "label": "Messages",
      "value": "messages"
    }
  ]'
  size="sm"
  variant="outline"
/>
Sizes

Medium

Use the balanced medium size for most product interfaces.

03
Live preview
Component usage.wrn
<ButtonGroup
  items='[
    {
      "label": "Profile",
      "value": "profile"
    },
    {
      "label": "Settings",
      "value": "settings"
    },
    {
      "label": "Messages",
      "value": "messages"
    }
  ]'
  variant="outline"
/>
Sizes

Large

Use large grouped buttons for prominent actions and touch-focused layouts.

04
Live preview
Component usage.wrn
<ButtonGroup
  items='[
    {
      "label": "Profile",
      "value": "profile"
    },
    {
      "label": "Settings",
      "value": "settings"
    },
    {
      "label": "Messages",
      "value": "messages"
    }
  ]'
  size="lg"
  variant="outline"
/>
Responsive stack

Responsive stack

Keep actions inline on larger screens and stack them on narrow viewports.

05
Live preview
Component usage.wrn
<ButtonGroup
  items='[
    {
      "label": "Save draft",
      "value": "draft"
    },
    {
      "label": "Preview",
      "value": "preview"
    },
    {
      "label": "Publish",
      "value": "publish"
    }
  ]'
  variant="outline"
  responsive="true"
/>
Orientation

Vertical stack

Stack connected actions vertically while preserving joined borders.

06
Live preview
Component usage.wrn
<ButtonGroup
  items='[
    {
      "label": "Account",
      "value": "account"
    },
    {
      "label": "Security",
      "value": "security"
    },
    {
      "label": "Notifications",
      "value": "notifications"
    }
  ]'
  variant="outline"
  orientation="vertical"
/>
Toolbar

Button toolbar

Expose a labeled toolbar with selectable formatting actions.

07
Live preview
Component usage.wrn
<ButtonGroup
  items='[
    {
      "label": "Bold",
      "value": "bold",
      "icon": "icon-[lucide--bold]"
    },
    {
      "label": "Italic",
      "value": "italic",
      "icon": "icon-[lucide--italic]"
    },
    {
      "label": "Underline",
      "value": "underline",
      "icon": "icon-[lucide--underline]"
    }
  ]'
  value="bold"
  variant="outline"
  selectable="true"
  toolbar="true"
  ariaLabel="Text formatting"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@clickFires when the component is activated by pointer or keyboard.
@selectFires when an item or option is selected.
@changeFires when the component value or selection changes.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('click', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
itemsstring[]No
valuestring""No
sizestring"md"No
colorstring"primary"No
variantstring"default"No
orientationstring"horizontal"No
responsivebooleanfalseNo
attachedbooleantrueNo
selectablebooleanfalseNo
toolbarbooleanfalseNo
disabledbooleanfalseNo
ariaLabelstring"Button group"No
classstring""No
} }