Todos los componentes (204)

Botón conmutable

Acciones · ToggleButton · .amset-togglebutton

Qué es y cuándo usarlo

Un botón que se queda pulsado: la negrita de un editor, «ver la cuadrícula», «silenciar». Es un <button aria-pressed> nativo, así que el teclado, el foco y lo que anuncia el lector son los del navegador.

Cuándo usarlo

Una opción que se enciende y se apaga sin salir de la pantalla: un formato del editor, una capa del mapa, el modo de vista.
Dentro de una Toolbar, con hiddenLabel y un icono: la barra se encarga de las flechas y de la parada única del tabulador.
shortcut para anunciar el atajo que hace lo mismo (Control+B).

Cuándo no

Elegir UNA opción entre varias que se excluyen: SegmentedGroup.
Un filtro con color propio: ToggleChip.
Un ajuste que se guarda (activar las notificaciones): Switch.
Una acción que se hace una vez: Button o IconButton.

Teclado: Tab llega al botón; Intro y Espacio lo alternan.

Accesibilidad: label es obligatoria y es el texto del propio botón: con hiddenLabel no se ve pero se sigue leyendo, así que lo que dice el lector y lo que dice quien lo maneja por voz coinciden (WCAG 2.5.3). Pulsado no es solo un color: el fondo se rellena y aparece una raya bajo el contenido, que es lo que queda en alto contraste.

Aspecto fino: variables CSS --amset-togglebutton-selected-background, -selected-ink y -mark (el grueso de la raya), sobre las del botón.

Cómo se ve

Vista en lista · sin negrita

<ToggleButton label="Cuadrícula" icon={<LayoutGridIcon />} selected={cuadricula} onChange={setCuadricula} variant="outline" />
<ToggleButton label="Negrita" hiddenLabel selected={negrita} onChange={setNegrita} shortcut="Control+B" variant="ghost" />

Props

Se importa con import { ToggleButton } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	El nombre del boton, siempre. Con `hiddenLabel` no se ve pero se sigue leyendo: es el texto del propio boton, asi que lo que dice el lector y lo que dice quien lo maneja por voz coinciden (WCAG 2.5.3).
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultSelected`	`boolean`	Pulsado al empezar, gobernandose por dentro.
`disabled`	`boolean`	Fuera de juego: ni se pulsa ni se enfoca.
`hiddenLabel`	`boolean`	Esconde el nombre y deja solo el icono, en un boton cuadrado.
`icon`	`ReactNode`	Icono delante del nombre. Decorativo: el nombre lo pone `label`.
`onChange`	`(selected: boolean) => void`	Se avisa con el valor NUEVO: `true` al pulsarlo, `false` al soltarlo.
`selected`	`boolean`	Pulsado o no, gobernado desde fuera.
`shortcut`	`string`	El atajo de teclado que hace lo mismo, en el formato de `aria-keyshortcuts` (`Control+B`). Lo anuncia el lector; el atajo lo escucha quien lo tenga, no el boton.
`size`	`"sm" \| "md" \| "lg"`	Alto de 30, 36 o 44 px, como los botones. Con el dedo, nada baja de 44 px.
`variant`	`ToggleButtonVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-togglebutton-selected-background`	`var(--amset-accent-soft)`
`--amset-togglebutton-selected-ink`	`var(--amset-accent-text)`
`--amset-togglebutton-mark`	`calc(var(--amset-border-width) * 2)`

Cómo se cambia

.amset-togglebutton {
  --amset-togglebutton-selected-background: ...;
  --amset-togglebutton-selected-ink: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: