buttonPrimary

buttonPrimary

Status: In use · Completeness: Incomplete · Source: Aegis UI kit · Languages: es, en

Qué es y para qué sirve

ES: Boton de accion primaria (filled / fuerte) para la accion principal de un flujo.

Destaca la accion mas importante de la vista y completa tareas (guardar, confirmar, continuar).

EN: Primary action button (filled / strong) for the main action in a flow.

Highlights the most important action and completes tasks (save, confirm, continue).

Cuándo se usa

ES: Cuando hay una accion principal clara en la pagina; no para navegacion pura (usa Link).

EN: When there is a clear primary action on the page; not for pure navigation (use Link).

Uso y comportamiento

Componente con el que los usuarios realizan acciones en una pantalla.

Anatomía

Parte Rol Tokens / unbound figmaId
Type=Solid, Icon only=No, State=Enabled, Size=L COMPONENT — 8:2323
Content FRAME — 8:2324
Plus INSTANCE — 8:2325
Text TEXT — 8:2326
Plus INSTANCE — 8:2327

Props

Prop Tipo Valores / default Controla
Label TEXT Label —
Left icon INSTANCE_SWAP 5:2419 —
Right icon INSTANCE_SWAP 5:2419 —
Show left icon BOOLEAN true —
Show right icon BOOLEAN true —
Type VARIANT Solid, Subtle, Outlined —
Icon only VARIANT No, Yes —
State VARIANT Enabled, Hover, Pressed, Focused, Disabled, Loading —
Size VARIANT L, M, S —
— SLOT none none

Layout, tokens y estados (Default)

Default: Type=Solid, Icon only=No, State=Enabled, Size=L (8:2323)

Propiedad UI Token unbound
Root · paddingLeft/Right space/m —
Root · paddingTop/Bottom space/xs —
Root · radius radius/l —
Root · fills color/bg/interactive/primary/strong/default —
Root · layoutMode — VERTICAL
Root · padding — t12 r24 b12 l24
Content · itemSpacing space/2xs —
Content · layoutMode — HORIZONTAL
Text · fills color/text/inverse —
Text · typography typo/body/md/* —
Vector · strokes color/border/neutral/subtle —

Variantes