Button
El botón permite a los usuarios realizar acciones y tomar decisiones con un solo toque. Es el componente de acción más fundamental del sistema.
Preview
Anatomía
Ícono (opcional)
Solar Icons. 20×20px. Left, Right o solo ícono.
Etiqueta
Obligatoria excepto en "Icon only". Usa Button Large/Medium/Small.
Contenedor
Border radius: 12px. Altura fija por tamaño.
Estado de focus
Ring de 2px en color #2065b0.
Variantes
Primary
Acción principal de la pantalla. Máximo uno por pantalla.
Secondary
Acción secundaria o alternativa. Puede coexistir con Primary.
Disabled
Estado no disponible. Siempre visible pero no interactuable.
Warning
Para flujo de cobranza o acciones de atención especial.
Positive
Confirmación positiva explícita.
Link btn
Acción de texto sin contenedor. Usa para acciones de baja jerarquía.
Tamaños
Estados
Default
Hover
Active/Press
Disabled
Loading
Posición de íconos(prop: Icon Show)
None
Solo texto
Left
Ícono antes del texto
Right
Ícono después del texto
Icon only
Solo ícono, sin texto
Reglas de uso
Usa un solo botón Primary por pantalla
Usa Secondary cuando necesitas una segunda acción visible
Siempre muestra el estado Disabled cuando la acción no está disponible
Usa Icon button para acciones repetitivas o sin espacio suficiente
El texto del botón debe describir la acción, no ser genérico ("Continuar", no "OK")
No pongas dos botones Primary en la misma pantalla
No uses más de 2 botones en una misma acción de pantalla
No uses Warning para acciones peligrosas — usa Disabled + confirmación
No truncues el texto del botón con ellipsis
No uses botones para navegación — usa Link o Navigation
Accesibilidad
Props / API conceptual
type ButtonType =
| 'Primary'
| 'Secondary'
| 'Link btn'
| 'Warning'
| 'Positive'
| 'Disabled';
type ButtonSize = 'Large' | 'Medium' | 'Small';
type IconShow = 'None' | 'Left' | 'Right';
interface ButtonProps {
type?: ButtonType; // Figma prop: Type
size?: ButtonSize; // Figma prop: Size
iconShow?: IconShow; // Figma prop: Icon Show
state?: 'Default' | 'Hover' | 'Active' | 'Disabled' | 'Loading';
color?: 'Default' | 'Positive' | 'Disabled'; // Figma prop: Color
icon?: ReactNode;
children: ReactNode;
onClick?: () => void;
disabled?: boolean;
loading?: boolean;
'aria-label'?: string; // Required cuando iconShow === 'None' y no hay texto
}Referencia en Figma
Página
⏺ Botones
Node ID
40000816:9890
Component sets
~10 sets
Componentes
55 variantes
El archivo documenta: Buttons (primary/secondary/link), Links, Icon buttons (Mic, Play, Delete), Swipe button. Las props extraídas son: Type, State, Icon Show, Size, Color.