basecoat/docs/src/components/button-group.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Button Group	A container that groups related buttons together with consistent styling.	label id Usage usage label id Accessibility accessibility label id Button Group vs Toggle Group button-group-vs-toggle-group label id children Examples examples label id Orientation example-orientation label id Size example-size label id Nested example-nested label id Separator example-separator label id Split example-split label id Input example-input label id Input Group example-input-group label id Dropdown Menu example-dropdown-menu label id Select example-select label id Popover example-popover label id RTL example-rtl

{% from "dropdown-menu.njk" import dropdown_menu %} {% from "popover.njk" import popover %} {% from "select.njk" import select %} {% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %}

{% set code_default %}

{% lucide "arrow-left" %}

Archive Report

Snooze {% set trigger %} {% lucide "ellipsis" %} {% endset %} {% call dropdown_menu( trigger=trigger, trigger_attrs={"class": "btn-icon-outline"}, popover_attrs={"data-align": "end"} ) %}

{% lucide "mail-check" %} Mark as Read

{% lucide "archive" %} Archive

---

{% lucide "clock" %} Snooze

{% lucide "calendar" %} Add to Calendar

{% lucide "list-filter-plus" %} Add to List

---

{% lucide "trash-2" %} Trash

{% endcall %}

{% endset %}

{{ code_preview("button-group-default", code_default | prettyHtml) }}

Usage

Wrap related buttons or inputs in a <div role="group" class="button-group"> element. Add aria-label or aria-labelledby when the group purpose is not already clear from nearby text.

Use data-orientation="vertical" to stack items vertically. Use <hr role="separator"> to visually divide non-outline buttons. Use button-group-text for static text inside a group.

{% set code_simple %}

Archive Report

{% endset %} {{ code_block(code_simple | prettyHtml, "html") }}

Accessibility

• Use role="group" on the button-group container.
• Use aria-label or aria-labelledby to label groups whose purpose is not obvious.
• Keyboard navigation remains native: users tab through each button, input, select, dropdown trigger, or popover trigger.

Button Group vs Toggle Group

• Use Button Group for related actions, such as archive/report/snooze.
• Use Toggle Group when each item controls selected/on state.

Examples

Orientation

Use data-orientation="vertical" to stack buttons vertically.

{% set code_orientation %}

{% lucide "plus" %} {% lucide "minus" %}

{% endset %}

{{ code_preview("button-group-orientation", code_orientation | prettyHtml) }}

Size

{% set code_size %}

Small Button Group {% lucide "plus" %}

Default Button Group {% lucide "plus" %}

Large Button Group {% lucide "plus" %}

{% endset %}

{{ code_preview("button-group-size", code_size | prettyHtml) }}

Nested

{% set code_nested %}

1 2 3 4 5

{% lucide "chevron-left" %} {% lucide "chevron-right" %}

{% endset %}

{{ code_preview("button-group-nested", code_nested | prettyHtml) }}

Separator

Use <hr role="separator"> to visually divide buttons within a group.

{% set code_separator %}

Copy

---

Paste

{% endset %}

{{ code_preview("button-group-separator", code_separator | prettyHtml) }}

Split

Use a separator to create a split action with a primary action and a secondary menu trigger.

{% set code_split %}

Save

---

{% set trigger_split %} {% lucide "chevron-down" %} {% endset %} {% call dropdown_menu( trigger=trigger_split, trigger_attrs={"class": "btn-icon-secondary", "aria-label": "More save options"}, popover_attrs={"data-align": "end"} ) %}

Save as draft

Save and publish

Save as template

{% endcall %}

{% endset %}

{{ code_preview("button-group-split", code_split | prettyHtml) }}

Input

{% set code_input %}

{% lucide "search" %}

{% endset %}

{{ code_preview("button-group-input", code_input | prettyHtml) }}

Input Group

{% set code_input_group %}

$

USD

{% endset %}

{{ code_preview("button-group-input-group", code_input_group | prettyHtml) }}

Dropdown Menu

{% set code_dropdown_menu %}

Follow {% set trigger %} {% lucide "chevron-down" %} {% endset %} {% call dropdown_menu( trigger=trigger, trigger_attrs={"class": "btn-icon-outline"}, popover_attrs={"data-align": "end"} ) %}

{% lucide "volume-off" %} Mute Conversation

{% lucide "check" %} Mark as Read

{% lucide "triangle-alert" %} Report Conversation

{% lucide "user-round-x" %} Block User

{% lucide "share" %} Share Conversation

{% lucide "copy" %} Copy Conversation

---

{% lucide "trash-2" %} Delete Conversation

{% endcall %}

{% endset %}

{{ code_preview("button-group-dropdown-menu", code_dropdown_menu | prettyHtml) }}

Select

{% set code_select %}

{% call select(trigger_attrs={"class": "[&_[data-name]]:hidden"}) %}

$ US Dollar

€ Euro

£ British Pound

{% endcall %}

{% lucide "arrow-right" %}

{% endset %}

{{ code_preview("button-group-select", code_select | prettyHtml) }}

Popover

{% set code_popover %}

{% lucide "bot" %} Copilot {% set trigger_popover %} {% lucide "chevron-down" %} {% endset %} {% call popover( trigger=trigger_popover, trigger_attrs={"class": "btn-icon-outline"}, popover_attrs={"class": "w-72 p-0", "data-align": "end"} ) %} Agent Tasks

Start a new task with Copilot

Describe your task in natural language. Copilot will work in the background and open a pull request for your review.

{% endcall %}

{% endset %}

{{ code_preview("button-group-popover", code_popover | prettyHtml) }}

RTL

Button groups support right-to-left layouts through logical border and radius rules. Add dir="rtl" to the group or an ancestor. Directional icons should be flipped explicitly.

{% set code_rtl %}

أرشفة تقرير إرسال {% lucide "arrow-right", { "class": "rtl:rotate-180" } %}

{% endset %}

{{ code_preview("button-group-rtl", code_rtl | prettyHtml) }}