Toggle

arrow_back arrow_forward

A two-state button that can be on or off.

format_bold

format_italic

format_underline

format_align_left

format_align_center

format_align_right

star

Mark as favourite

<button class="tog" onclick="this.classList.toggle('active')">
  <span class="material-icons-round">format_bold</span>
</button>

<!-- With label -->
<div class="tog-label-wrap">
  <button class="tog active"><span class="material-icons-round">star</span></button>
  <span>Favourite</span>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

API Reference

Classes

Class	Description
`tog`	Default toggle button (36×36px)
`tog.active`	Pressed / selected state (black bg)
`tog-outline`	Outline variant for dark surfaces
`tog-outline.active`	Pressed outline (purple bg)
`tog-label-wrap`	Flex row with toggle + text label

← Previous Text Fields Next → Toggle Group