Button

<sg-button> v0.1.1

Componente de botón interactivo con múltiples variantes, tamaños y estados. Soporta iconos, estados de carga y es totalmente accesible.

Ejemplos

Variantes

Primary

Secondary

Outline

Ghost

Error

Success

Warning

Info

    
    example.html 
<sg-button variant="primary">Primary</sg-button>
<sg-button variant="secondary">Secondary</sg-button>
<sg-button variant="outline">Outline</sg-button>
<sg-button variant="ghost">Ghost</sg-button>
<sg-button variant="error">Error</sg-button>
<sg-button variant="success">Success</sg-button>
<sg-button variant="warning">Warning</sg-button>
<sg-button variant="info">Info</sg-button>
    

Tamaños

Extra Small

Small

Medium

Large

    
    example.html 
<sg-button size="xs">Extra Small</sg-button>
<sg-button size="sm">Small</sg-button>
<sg-button size="md">Medium</sg-button>
<sg-button size="lg">Large</sg-button>
    

Formas

Default

Pill

■

●

    
    example.html 
<sg-button shape="default">Default</sg-button>
<sg-button shape="pill">Pill</sg-button>
<sg-button shape="square">■</sg-button>
<sg-button shape="circle">●</sg-button>
    

Ancho completo

Block Button

Block Outline

    
    example.html 
<sg-button shape="block">Block Button</sg-button>
<sg-button shape="block" variant="outline">Block Outline</sg-button>
    

Con iconos

Añadir

Guardar

    
    example.html 
<sg-button leading-icon="add">Añadir</sg-button>
<sg-button trailing-icon="arrow-right">Siguiente</sg-button>
<sg-button leading-icon="save" trailing-icon="check">Guardar</sg-button>
<sg-button shape="circle" leading-icon="heart" aria-label="Favorito"></sg-button>
<sg-button shape="circle" variant="outline" leading-icon="settings" aria-label="Configuración"></sg-button>
    

Estados

Deshabilitado

Secondary Disabled

Cargando...

Guardar

    
    example.html 
<sg-button disabled>Deshabilitado</sg-button>
<sg-button variant="secondary" disabled>Secondary Disabled</sg-button>
<sg-button loading>Cargando...</sg-button>
<sg-button loading loading-text="Guardando...">Guardar</sg-button>
    

Combinaciones

Completado

Eliminar

Advertencia

Info

    
    example.html 
<sg-button variant="success" leading-icon="check" shape="pill">Completado</sg-button>
<sg-button variant="error" leading-icon="delete" size="sm">Eliminar</sg-button>
<sg-button variant="warning" trailing-icon="warning" size="lg">Advertencia</sg-button>
<sg-button variant="info" leading-icon="info" shape="pill" size="sm">Info</sg-button>
    

Playground

Edita el código y ve los cambios en tiempo real:

API Reference

Propiedades

Prop	Tipo	Default	Descripción
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'error' \| 'success' \| 'warning' \| 'info'`	`'primary'`	Variante de color del botón
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Tamaño del botón
`shape`	`'default' \| 'pill' \| 'circle' \| 'square' \| 'block'`	`'default'`	Forma del botón
`disabled`	`boolean`	`false`	Deshabilita el botón
`loading`	`boolean`	`false`	Muestra spinner de carga
`loading-text`	`string`	`undefined`	Texto durante la carga
`leading-icon`	`string`	`undefined`	Nombre del icono al inicio
`trailing-icon`	`string`	`undefined`	Nombre del icono al final
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Tipo de botón HTML
`aria-label`	`string`	`undefined`	Etiqueta accesible para screen readers

Eventos

Evento	Tipo	Descripción
`sgClick`	`CustomEvent<MouseEvent>`	Emitido al hacer click (si no está deshabilitado/cargando)

Slots

Slot	Descripción
`(default)`	Contenido del botón (texto, iconos, etc.)

Cómo usar

Instalación

El componente está disponible como parte de la librería SageBox.

    
    terminal 
npm install sagebox

Uso básico

    
    example.html 
<sg-button>Click me</sg-button>

<!-- Con variante -->
<sg-button variant="secondary">Secondary</sg-button>

<!-- Con icono -->
<sg-button leading-icon="save">Guardar</sg-button>
    

Manejo de eventos

    
    events.js 
// JavaScript
const button = document.querySelector('sg-button');
button.addEventListener('sgClick', (event) => {
  console.log('Button clicked!', event.detail);
});

// Angular
<sg-class="hl-function">button (sgClick)="onButtonClick($event)">Click</sg-button>

// React
<SgButton onSgClick={(e) => handleClick(e)}>Click</SgButton>
    

Accesibilidad

El componente incluye soporte completo para accesibilidad siguiendo las pautas WCAG 2.1:

🏷️ Etiquetas ARIA

Usa aria-label para proporcionar texto descriptivo cuando el botón solo tiene un icono
El estado disabled añade automáticamente aria-disabled="true"
El estado loading añade aria-busy="true" para indicar una operación en progreso

    
    a11y.html 
<!-- Botón con solo icono - requiere aria-label -->
<sg-button shape="circle" leading-icon="heart" aria-label="Añadir a favoritos"></sg-button>

<!-- El componente añade aria-describedby si hay texto de ayuda -->
<sg-button aria-describedby="help-text">Enviar</sg-button>
    