Todos los componentes (204)

Botón dividido

Acciones · SplitButton

Qué es y cuándo usarlo

La acción de siempre con sus variantes al lado: «Emitir factura» y, en el desplegable, «Emitir y enviar por correo» o «Guardar como borrador». Son dos botones de verdad pegados, cada uno con su nombre: el grande hace la acción y el de la flecha (cuadrado) abre el menú.

Cuándo usarlo

Hay una opción que se usa casi siempre y otras parecidas que se usan de vez en cuando: ahorra llenar la pantalla de botones.
Como acción principal de un formulario o de una ficha: por defecto es solid y de acento.
onPress es la acción grande; actions son las del menú y onSelect recibe la clave de la elegida.

Cuándo no

Si todas las opciones pesan lo mismo, no hay acción principal: ActionMenu.
Si solo hay una acción: Button.

Teclado: Tab pasa por las dos mitades, primero la acción y luego la flecha. En la flecha, Intro, Espacio o flecha abajo abren el menú (flecha arriba lo abre por la última opción); las flechas recorren las opciones, Inicio y Fin van a los extremos, Intro elige y Escape cierra y devuelve el foco a la flecha. disabled apaga las dos mitades.

Accesibilidad: la flecha no tiene texto: su nombre es menuLabel («Más opciones» por defecto), que también nombra el menú. Mejor que diga de qué es: «Más formas de emitir». Las opciones destructive van en rojo y con su verbo escrito, nunca solo con el color.

Aspecto fino: sin variables propias. Cada mitad es un Button y admite las --amset-button-*; la unión se ajusta con las clases amset-split, amset-split__main y amset-split__arrow. El menú es el de ActionMenu (amset-menu).

Cómo se ve

La acción de siempre en el botón grande; las demás, en la flecha.

<SplitButton
  menuLabel="Mas formas de emitir"
  onPress={emitir}
  actions={[
    { key: 'emitir-enviar', label: 'Emitir y enviar por correo' },
    { key: 'proforma', label: 'Emitir como proforma' },
    { key: 'descartar', label: 'Descartar la factura', destructive: true, separatedBefore: true },
  ]}
  onSelect={hacer}
>
  Emitir factura
</SplitButton>

Props

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

Prop	Tipo	Para qué sirve
`actions`obligatoria	`readonly MenuAction[]`	Las variantes de esa accion: "Guardar y enviar", "Guardar como borrador".
`children`obligatoria	`ReactNode`	Lo que hace el boton grande: la accion de siempre.
`onPress`obligatoria	`() => void`	—
`onSelect`obligatoria	`(key: string) => void`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`disabled`	`boolean`	—
`menuLabel`	`string`	Nombre del boton del desplegable: es un boton sin texto.
`placement`	`Placement`	—
`size`	`"sm" \| "md" \| "lg"`	—
`startIcon`	`ReactNode`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`variant`	`"solid" \| "soft" \| "outline" \| "ghost"`	Como el de `Button`. Por defecto, `solid`: suele ser la accion principal.

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

En el banco de pruebas

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