button-group
Layout primitive for visually connected buttons and form controls.
Use fieldset[role="group"] around related commands or form controls. Set
orientation="vertical" for stacked groups. Use Toggle Group when the controls
represent one or more selectable values.
<fieldset role="group">
<button>One</button>
<hr />
<button>Two</button>
</fieldset>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Button Group</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="buttonGroupAction = 'None'"
data-example="button-group-demo button-group-orientation separator button-group-size button-group-split"
>
<main class="visual-example">
<section aria-label="Button group sizes">
<div aria-label="State ownership" role="group">
<button
id="button-group-unmanaged"
type="button"
variant="outline"
size="sm"
>
Small
</button>
<button
id="button-group-managed"
type="button"
variant="outline"
size="sm"
aria-pressed="true"
>
Button
</button>
<button type="button" variant="outline" size="sm">Group</button>
<button
type="button"
variant="outline"
size="icon-sm"
aria-label="Add small"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M5 12h14M12 5v14" />
</svg>
</button>
</div>
<div role="group">
<button type="button" variant="outline">Default</button>
<button type="button" variant="outline">Button</button>
<button type="button" variant="outline">Group</button>
<button
type="button"
variant="outline"
size="icon"
aria-label="Add default"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M5 12h14M12 5v14" />
</svg>
</button>
</div>
<div role="group">
<button type="button" variant="outline" size="lg">Large</button>
<button type="button" variant="outline" size="lg">Button</button>
<button type="button" variant="outline" size="lg">Group</button>
<button
type="button"
variant="outline"
size="icon-lg"
aria-label="Add large"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M5 12h14M12 5v14" />
</svg>
</button>
</div>
</section>
<fieldset orientation="vertical" aria-label="Media controls" role="group">
<button
type="button"
variant="outline"
size="icon"
aria-label="Increase"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M5 12h14M12 5v14" />
</svg>
</button>
<hr />
<button
type="button"
variant="outline"
size="icon"
aria-label="Decrease"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M5 12h14" />
</svg>
</button>
</fieldset>
<section aria-label="Button group compositions">
<div role="group">
<button
type="button"
variant="secondary"
size="sm"
ng-click="buttonGroupAction = 'Copy'"
>
Copy
</button>
<hr aria-orientation="vertical" />
<button
type="button"
variant="secondary"
size="sm"
ng-click="buttonGroupAction = 'Paste'"
>
Paste
</button>
</div>
<div role="group">
<button
type="button"
variant="secondary"
ng-click="buttonGroupAction = 'Button'"
>
Button
</button>
<hr aria-orientation="vertical" />
<button
type="button"
variant="secondary"
size="icon"
aria-label="Add item"
ng-click="buttonGroupAction = 'Add'"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M5 12h14M12 5v14" />
</svg>
</button>
</div>
</section>
<output class="output">Action: {{ buttonGroupAction }}</output>
</main>
</body>
</html>
Composition Workflows
Button groups can connect nested groups, inputs, input groups, Select, Dropdown, and Popover triggers. Each composed component retains its own behavior and application state.
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Button Group Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="toolbarAction = 'None'; searchTerm = ''; voiceEnabled = false; currency = '$'; rtlAction = 'لا شيء'"
data-example="button-group-demo button-group-dropdown button-group-input button-group-input-group button-group-nested button-group-popover button-group-rtl button-group-select"
>
<main class="button-group-workflows">
<section
class="button-group-workflow-section button-group-menu-stage"
aria-labelledby="button-group-toolbar-heading"
>
<h2 id="button-group-toolbar-heading">Toolbar</h2>
<fieldset aria-label="Message actions" role="group">
<div role="group">
<button
type="button"
variant="outline"
size="icon"
aria-label="Go Back"
>
←
</button>
</div>
<div role="group">
<button
type="button"
variant="outline"
ng-click="toolbarAction = 'Archive'"
>
Archive
</button>
<button
type="button"
variant="outline"
ng-click="toolbarAction = 'Report'"
>
Report
</button>
</div>
<div role="group">
<button
type="button"
variant="outline"
ng-click="toolbarAction = 'Snooze'"
>
Snooze
</button>
<span ng-dropdown-menu>
<button
type="button"
variant="outline"
size="icon"
aria-label="More Options"
>
•••
</button>
<menu align="end" style="--menu-width: 10rem">
<section>
<button ng-click="toolbarAction = 'Mark as Read'">
Mark as Read
</button>
<button ng-click="toolbarAction = 'Archive'">Archive</button>
<button ng-click="toolbarAction = 'Snooze'">Snooze</button>
</section>
<span></span>
<button
variant="destructive"
ng-click="toolbarAction = 'Trash'"
>
Trash
</button>
</menu>
</span>
</div>
</fieldset>
<output class="button-group-output">
Action: {{ toolbarAction }}
</output>
</section>
<section
class="button-group-workflow-section button-group-menu-stage"
aria-labelledby="button-group-dropdown-heading"
>
<h2 id="button-group-dropdown-heading">Split dropdown</h2>
<fieldset aria-label="Follow actions" role="group">
<button type="button" variant="outline">Follow</button>
<span ng-dropdown-menu>
<button
type="button"
variant="outline"
aria-label="More follow actions"
></button>
<menu align="end" style="--menu-width: 11rem">
<section>
<button>Mute Conversation</button>
<button>Mark as Read</button>
<button>Report Conversation</button>
<button>Block User</button>
<button>Share Conversation</button>
<button>Copy Conversation</button>
</section>
<span></span>
<button variant="destructive">Delete Conversation</button>
</menu>
</span>
</fieldset>
</section>
<section
class="button-group-workflow-section"
aria-labelledby="button-group-input-heading"
>
<h2 id="button-group-input-heading">Search input</h2>
<div role="group">
<input
ng-model="searchTerm"
placeholder="Search..."
aria-label="Search query"
/>
<button
type="button"
variant="outline"
aria-label="Search"
ng-click="toolbarAction = searchTerm || 'Search'"
>
⌕
</button>
</div>
<output class="button-group-output">
Query: {{ searchTerm || 'Empty' }}
</output>
</section>
<section
class="button-group-workflow-section"
aria-labelledby="button-group-nested-heading"
>
<h2 id="button-group-nested-heading">Nested input group</h2>
<div role="group" style="--radius-md: var(--radius-full)">
<div role="group">
<button
type="button"
variant="outline"
size="icon"
aria-label="Add attachment"
>
+
</button>
</div>
<div role="group">
<div class="input-group">
<input placeholder="Send a message..." aria-label="Message" />
<span align="inline-end">⌁</span>
</div>
</div>
</div>
</section>
<section
class="button-group-workflow-section"
aria-labelledby="button-group-voice-heading"
>
<h2 id="button-group-voice-heading">Voice mode</h2>
<div role="group" style="--radius-md: var(--radius-full)">
<div role="group">
<button
type="button"
variant="outline"
size="icon"
aria-label="Add message item"
>
+
</button>
</div>
<div role="group">
<div class="input-group">
<input
placeholder="{{ voiceEnabled ? 'Record and send audio...' : 'Send a message...' }}"
ng-disabled="voiceEnabled"
aria-label="Voice message"
/>
<span align="inline-end">
<button
type="button"
size="icon-xs"
aria-label="Voice Mode"
aria-pressed="{{ voiceEnabled }}"
ng-click="voiceEnabled = !voiceEnabled"
>
⌁
</button>
</span>
</div>
</div>
</div>
</section>
<section
class="button-group-workflow-section button-group-popover-stage"
aria-labelledby="button-group-popover-heading"
>
<h2 id="button-group-popover-heading">Popover</h2>
<div role="group">
<button type="button" variant="outline">◇ Copilot</button>
<span>
<button
type="button"
variant="outline"
size="icon"
aria-label="Open Popover"
popovertarget="popover-button-group-workflows-1-content"
>
⌄
</button>
<aside
side="bottom"
aria-label="Copilot task"
class="button-group-popover-content"
id="popover-button-group-workflows-1-content"
align="center"
popover
>
<header>
<h3>Start a new task with Copilot</h3>
<p>Describe your task in natural language.</p>
</header>
<label class="visually-hidden" for="copilot-task"
>Task Description</label
>
<textarea id="copilot-task" placeholder="I need to..."></textarea>
<p class="muted">Copilot will open a pull request for review.</p>
</aside>
</span>
</div>
</section>
<section
class="button-group-workflow-section button-group-select-stage"
aria-labelledby="button-group-select-heading"
>
<h2 id="button-group-select-heading">Currency select</h2>
<div role="group">
<div role="group">
<select aria-label="Currency" ng-model="currency">
<option value="$">$ US Dollar</option>
<option value="€">€ Euro</option>
<option value="£">£ British Pound</option>
</select>
<input
placeholder="10.00"
inputmode="numeric"
aria-label="Amount"
/>
</div>
<div role="group">
<button
type="button"
variant="outline"
size="icon"
aria-label="Send"
>
→
</button>
</div>
</div>
</section>
<section
class="button-group-workflow-section button-group-menu-stage button-group-workflow-wide"
aria-labelledby="button-group-rtl-heading"
dir="rtl"
lang="ar"
>
<h2 id="button-group-rtl-heading">اتجاه من اليمين إلى اليسار</h2>
<fieldset aria-label="إجراءات الرسالة" role="group">
<div role="group">
<button type="button" variant="outline">أرشفة</button>
<button type="button" variant="outline">تقرير</button>
</div>
<div role="group">
<button type="button" variant="outline">تأجيل</button>
<span ng-dropdown-menu>
<button
type="button"
variant="outline"
size="icon"
aria-label="المزيد من الخيارات"
>
•••
</button>
<menu align="end" style="--menu-width: 10rem">
<button ng-click="rtlAction = 'وضع علامة كمقروء'">
وضع علامة كمقروء
</button>
<button ng-click="rtlAction = 'أرشفة'">أرشفة</button>
<span></span>
<button
variant="destructive"
ng-click="rtlAction = 'سلة المهملات'"
>
سلة المهملات
</button>
</menu>
</span>
</div>
</fieldset>
<output class="button-group-output"> الإجراء: {{ rtlAction }} </output>
</section>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Grouped native actions.
Anatomy
Root styling selector
[role="group"]
Semantic structure
Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
aria-orientation | Authored | Use vertical on a direct separator when it divides controls along the inline axis. |
orientation | Authored | Group layout: vertical; omit for the horizontal layout. |
role | Authored | Explicit semantic role when native HTML does not provide one. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Grouped native actions. AngularCSS supplies styling without a runtime directive. Native HTML owns platform behavior; AngularTS owns application values, commands, and authored state.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Use a native button whenever the control performs an action. Keep an accessible name, preserve visible focus, and use disabled for unavailable native controls.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.