# Toggle

> Botón que queda presionado, solo o en grupo: sin borde, con contorno, tamaños, vertical y con texto.

Categoría: Acción · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- Para estados que se prenden y apagan por separado: negrita, destacados, mostrar archivados.
- Si se elige una sola opción entre varias, usa Botones › Grupo segmentado.
- Si el cambio se guarda como un ajuste, usa el interruptor de Controles.

## Toggle

```html
<div class="flex flex-wrap items-start justify-center gap-8"><button type="button" aria-pressed="true" aria-label="Negrita"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent   active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-bold-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Cursiva"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent   active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-italic-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="true"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:star-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon>Destacados</button></div>
```

## Tamaños

```html
<div class="flex flex-wrap items-start justify-center gap-8"><button type="button" aria-pressed="false" aria-label="Negrita"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-8 min-w-8 px-2 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-bold-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Negrita"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-bold-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Negrita"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-12 min-w-12 px-3 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-bold-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></button></div>
```

## Deshabilitado

```html
<div class="flex flex-wrap items-start justify-center gap-8"><button type="button" aria-pressed="false" aria-label="Negrita" disabled class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent disabled:opacity-50 disabled:pointer-events-none "><iconify-icon icon="solar:text-bold-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Cursiva" disabled class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent disabled:opacity-50 disabled:pointer-events-none"><iconify-icon icon="solar:text-italic-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></div>
```

## Grupo

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="group" aria-label="Formato" class="inline-flex"><button type="button" aria-pressed="true" aria-label="Negrita"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent  rounded-none first:rounded-l-ccs last:rounded-r-ccs active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-bold-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Cursiva"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent  rounded-none first:rounded-l-ccs last:rounded-r-ccs active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-italic-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Subrayado"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent  rounded-none first:rounded-l-ccs last:rounded-r-ccs active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-underline-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></div></div>
```

## Grupo con contorno

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="group" aria-label="Formato" class="inline-flex rounded-ccs bg-white dark:bg-ccs-dark-surface"><button type="button" aria-pressed="true" aria-label="Negrita"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-bold-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Cursiva"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-italic-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Subrayado"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-underline-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></div></div>
```

## Separados

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="group" aria-label="Formato" class="inline-flex gap-1"><button type="button" aria-pressed="true" aria-label="Negrita"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-bold-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Cursiva"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-italic-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Subrayado"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-underline-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></div></div>
```

## Tamaños del grupo

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col items-center gap-4"><div role="group" aria-label="Formato" class="inline-flex rounded-ccs bg-white dark:bg-ccs-dark-surface"><button type="button" aria-pressed="true" aria-label="Negrita"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-8 min-w-8 px-2 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-bold-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Cursiva"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-8 min-w-8 px-2 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-italic-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Subrayado"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-8 min-w-8 px-2 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-underline-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div><div role="group" aria-label="Formato" class="inline-flex rounded-ccs bg-white dark:bg-ccs-dark-surface"><button type="button" aria-pressed="true" aria-label="Negrita"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-bold-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Cursiva"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-italic-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Subrayado"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-underline-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></div><div role="group" aria-label="Formato" class="inline-flex rounded-ccs bg-white dark:bg-ccs-dark-surface"><button type="button" aria-pressed="true" aria-label="Negrita"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-12 min-w-12 px-3 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-bold-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Cursiva"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-12 min-w-12 px-3 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-italic-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Subrayado"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-12 min-w-12 px-3 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:text-underline-outline" class="shrink-0 text-[20px] " aria-hidden="true"></iconify-icon></button></div></div></div>
```

## Vertical

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="group" aria-label="Vista" class="inline-flex flex-col rounded-ccs bg-white dark:bg-ccs-dark-surface"><button type="button" aria-pressed="true" aria-label="Lista"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -mt-px first:mt-0 first:rounded-t-ccs last:rounded-b-ccs focus-visible:z-10 w-full active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:list-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Cuadrícula"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -mt-px first:mt-0 first:rounded-t-ccs last:rounded-b-ccs focus-visible:z-10 w-full active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:widget-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Tarjetas"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -mt-px first:mt-0 first:rounded-t-ccs last:rounded-b-ccs focus-visible:z-10 w-full active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:widget-4-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></div></div>
```

## Con texto

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="group" aria-label="Peso" class="inline-flex rounded-ccs bg-white dark:bg-ccs-dark-surface"><button type="button" aria-pressed="false"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100">Ligero</button><button type="button" aria-pressed="true"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100">Normal</button><button type="button" aria-pressed="false"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100">Medio</button><button type="button" aria-pressed="false"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100">Negrita</button></div></div>
```

## Cambiar la vista

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="group" aria-label="Vista" class="inline-flex rounded-ccs bg-white dark:bg-ccs-dark-surface"><button type="button" aria-pressed="true" aria-label="Lista"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:list-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Cuadrícula"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:widget-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-pressed="false" aria-label="Tarjetas"  class="inline-flex items-center justify-center gap-2 rounded-ccs text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-10 min-w-10 px-2.5 border border-ccs-line-strong bg-white text-ccs-ink hover:bg-ccs-hover aria-pressed:bg-ccs-hover aria-pressed:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover dark:aria-pressed:bg-ccs-dark-hover dark:aria-pressed:text-ccs-dark-accent rounded-none -ml-px first:ml-0 first:rounded-l-ccs last:rounded-r-ccs focus-visible:z-10 active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:widget-4-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></div></div>
```

## Guía: Accesibilidad

Cada toggle es un <button> con aria-pressed. El grupo lleva role="group" y un nombre. El nombre del botón no cambia al presionarlo ("Negrita", no "Quitar negrita"): el estado ya lo dice aria-pressed. Solo ícono, con aria-label y Tooltip.
