toggle
aria-pressed state.Use a native button with authored aria-pressed state. That state identifies
the control as a toggle and supplies its styling hook.
<button aria-pressed="true">Bold</button>
<button variant="outline" aria-pressed="false">Italic</button>
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 Toggle</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="bookmark=false;bold=false;italic=true"
data-example="toggle-demo toggle-outline toggle-sizes toggle-text"
>
<main class="visual-example">
<div class="row" aria-label="Bookmark toggle">
<button
variant="outline"
size="sm"
aria-label="Toggle bookmark"
aria-pressed="{{ bookmark }}"
ng-click="bookmark = !bookmark"
type="button"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M6 3h12v18l-6-4-6 4z" />
</svg>
Bookmark
</button>
</div>
<div class="row" aria-label="Text toggles">
<button
aria-label="Toggle italic text"
aria-pressed="{{ italic }}"
ng-click="italic = !italic"
type="button"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M10 4h7M7 20h7M14 4 10 20" />
</svg>
Italic
</button>
</div>
<div class="row" aria-label="Outline toggles">
<button
variant="outline"
aria-label="Toggle italic"
aria-pressed="{{ italic }}"
ng-click="italic = !italic"
type="button"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M10 4h7M7 20h7M14 4 10 20" />
</svg>
Italic
</button>
<button
variant="outline"
aria-label="Toggle bold"
aria-pressed="{{ bold }}"
ng-click="bold = !bold"
type="button"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M6 4h7a4 4 0 0 1 0 8H6zM6 12h8a4 4 0 0 1 0 8H6z" />
</svg>
Bold
</button>
</div>
<div class="row" aria-label="Toggle sizes">
<button variant="outline" size="sm" type="button" aria-pressed="false">
Small
</button>
<button variant="outline" type="button" aria-pressed="false">
Default
</button>
<button variant="outline" size="lg" type="button" aria-pressed="false">
Large
</button>
</div>
<output class="output">
Bookmark: {{ bookmark ? 'on' : 'off' }}, Bold: {{ bold ? 'on' : 'off'
}}, Italic: {{ italic ? 'on' : 'off' }}
</output>
</main>
</body>
</html>
Workflows
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Toggle 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="disabledState = true; rtlBookmark = false"
data-example="toggle-disabled toggle-rtl"
>
<main class="component-state-grid visual-example">
<section
class="component-state-section"
aria-labelledby="toggle-disabled-heading"
>
<h2 id="toggle-disabled-heading">Disabled</h2>
<div class="row">
<button
type="button"
ng-disabled="disabledState"
aria-pressed="false"
>
Disabled
</button>
<button
type="button"
variant="outline"
ng-disabled="disabledState"
aria-pressed="false"
>
Disabled
</button>
</div>
<button
type="button"
variant="outline"
size="sm"
ng-click="disabledState = !disabledState"
>
{{ disabledState ? 'Enable toggles' : 'Disable toggles' }}
</button>
</section>
<section
class="component-state-section"
aria-labelledby="toggle-rtl-heading"
dir="rtl"
lang="ar"
>
<h2 id="toggle-rtl-heading">إشارة مرجعية</h2>
<button
type="button"
size="sm"
variant="outline"
aria-label="تبديل الإشارة المرجعية"
aria-pressed="{{ rtlBookmark }}"
ng-click="rtlBookmark = !rtlBookmark"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="M6 3h12v18l-6-4-6 4z" />
</svg>
إشارة مرجعية
</button>
<output class="output">
الحالة: {{ rtlBookmark ? 'مفعلة' : 'غير مفعلة' }}
</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. Native button pressed state.
Anatomy
Root styling selector
button[aria-pressed]
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-disabled | Authored | Semantic disabled state. |
aria-pressed | Authored | Pressed state of a toggle control. |
size | Authored | Toggle size: sm or lg; omit for the default size. |
variant | Authored | Toggle presentation: outline; omit for the default style. |
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
Native button pressed state. 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.