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