Capítulo 033 componentes

Buttons & Actions

Disparadores de acciones — desde el CTA del checkout hasta el botón cerrar de un modal. Una jerarquía clara de tamaños y prioridades.

Button

#button
Vista previaEn producción

Guidelines

When to use

default size: form submission, dialog actions, ordinary in-page actions — the workhorse. lg: rare — desktop only for hero landings, mobile sticky checkout/booking footers. sm: sparse — dense settings, toolbars, inline card/table actions.

When not to use

Don’t use lg for everyday actions — reserve for "this is the moment" moments. Don’t use destructive for "remove" actions that aren’t truly irreversible (default is fine).

Don't

Mix sizes for equal-priority actions in the same row — pick one for the group. Place a secondary Button inside a filled Card or on a gray surface — it loses contrast.

Chip

#chip
Vista previaEn producción
Dismissable

Guidelines

When to use

outline: single-select with few options on white surfaces, crisp resting. soft: multi-select filters where many can be on, OR single-select dense grids on white surfaces (time slots, attribute pickers) where outline would create too much border noise. filled: single-select where the active choice should clearly dominate. Use size lg when chips are primary form controls; md/sm for tags and inline metadata. A chip group reads as a related set — tags, filters, attributes.

When not to use

Not for read-only status (use Badge), form data entry (use RadioGroup), or a single floating chip alone (chips imply a group).

Don't

Mix outline and soft resting states in the same group — pick one. Use soft on gray surfaces (loses contrast) — switch to outline.

CloseButton

#close-button
Vista previaEn producción
Click to dismiss