Button

What it is and when to use it

What it looks like

<Button variant="solid" tone="accent" startIcon={<SaveIcon />} loading={guardando} loadingLabel="Saving" onPress={guardar}>
  Guardar cambios
</Button>
<Button variant="outline" startIcon={<PlusIcon />}>New order</Button>
<Button variant="outline" endIcon={<DownloadIcon />}>Export</Button>
<Button variant="soft" tone="error" startIcon={<TrashIcon />}>Delete</Button>
<Button variant="ghost">Cancel</Button>
<Button variant="solid" disabled>Unavailable</Button>
<Button variant="solid" size="sm" shape="pill">Small and round</Button>
<ToggleButton label="Favourite" icon={<StarIcon />} defaultSelected variant="outline" />
<TextButton onPress={deshacer}>Undo</TextButton>

Props

Import it with import { Button } from '@amset/ui'. Required props are marked.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

How to change it

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

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech:

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