Botón

Qué es y cuándo usarlo

Cómo se ve

<Button variant="solid" tone="accent" startIcon={<SaveIcon />} loading={guardando} loadingLabel="Guardando" onPress={guardar}>
  Guardar cambios
</Button>
<Button variant="outline" startIcon={<PlusIcon />}>Nuevo pedido</Button>
<Button variant="outline" endIcon={<DownloadIcon />}>Exportar</Button>
<Button variant="soft" tone="error" startIcon={<TrashIcon />}>Eliminar</Button>
<Button variant="ghost">Cancelar</Button>
<Button variant="solid" disabled>No disponible</Button>
<Button variant="solid" size="sm" shape="pill">Pequeño y redondo</Button>
<ToggleButton label="Favorito" icon={<StarIcon />} defaultSelected variant="outline" />
<TextButton onPress={deshacer}>Deshacer</TextButton>

Props

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

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.

Cómo se cambia

.amset-button {
  --amset-button-color: ...;
  --amset-button-ink: ...;
}

En el banco de pruebas

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

• Interactivo
• Principal
• Con icono
• Cargando
• Cargando con texto
• Peligro
• Ancho completo
• Deshabilitado
• Formas