SageBox - Component Library

Botón

Botón interactivo con múltiples variantes

Docs <sg-button>

Variantes

Primary

Secondary

Outline

Ghost

Danger

    
    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="danger">Danger</sg-button>
    

Tamaños

Small

Medium

Large

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

Estados

Disabled

Loading

    
    example.html 
<sg-button disabled>Disabled</sg-button>
<sg-button loading>Loading</sg-button>
    

Propiedades

9

Prop	Tipo	Default	Descripción
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'`	`primary`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`md`	Button size
`disabled`	`boolean`	`false`	Disable interactions
`loading`	`boolean`	`false`	Show loading spinner
`type`	`'button' \| 'submit' \| 'reset'`	`button`	Native button type
`full-width`	`boolean`	`false`	Expand to container width
`icon-only`	`boolean`	`false`	Icon only mode (square)
`aria-label`	`string`	`-`	Accessibility label
`href`	`string`	`-`	Convert to anchor link

Eventos

3

Evento	Tipo	Descripción
`sgClick`	`CustomEvent<void>`	Emitted when button is clicked
`sgFocus`	`CustomEvent<void>`	Emitted when button receives focus
`sgBlur`	`CustomEvent<void>`	Emitted when button loses focus

Slots

3

Slot	Descripción
`default`	Button content (text/icons)
`icon-start`	Icon before text
`icon-end`	Icon after text

Icono

Sistema de iconos SVG optimizado

Docs <sg-icon>

Básicos

    
    example.html 
<sg-icon name="home" size="24"></sg-icon>
<sg-icon name="search" size="24"></sg-icon>
<sg-icon name="settings" size="24"></sg-icon>
<sg-icon name="user" size="24"></sg-icon>
<sg-icon name="menu" size="24"></sg-icon>
    

Colores

    
    example.html 
<sg-icon name="heart" size="24" color="#ef4444"></sg-icon>
<sg-icon name="star" size="24" color="#f59e0b"></sg-icon>
<sg-icon name="check" size="24" color="#22c55e"></sg-icon>
<sg-icon name="refresh" size="24" color="#8b5cf6" spin></sg-icon>
    

Tamaños

    
    example.html 
<sg-icon name="star" size="16"></sg-icon>
<sg-icon name="star" size="24"></sg-icon>
<sg-icon name="star" size="32"></sg-icon>
<sg-icon name="star" size="48"></sg-icon>
    

Propiedades

10

Prop	Tipo	Default	Descripción
`name`	`string`	`-`	Icon name from sprite
`size`	`number \| string`	`24`	Icon size in pixels
`color`	`string`	`currentColor`	Icon color (CSS)
`spin`	`boolean`	`false`	Continuous rotation
`flip`	`'horizontal' \| 'vertical' \| 'both'`	`-`	Mirror the icon
`rotate`	`number`	`0`	Rotation in degrees
`sprite-url`	`string`	`-`	Custom sprite URL
`aria-label`	`string`	`-`	Accessibility label
`aria-hidden`	`boolean`	`true`	Hide from screen readers
`lazy`	`boolean`	`true`	Lazy load the sprite

Dropdown

Menú desplegable con opciones

Docs <sg-dropdown>

Básico

    
    example.html 
<sg-dropdown align="start">
  <button slot="trigger">Select option ▼</button>
  <button>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</sg-dropdown>
    

With Header & Footer

    
    example.html 
<sg-dropdown align="start">
  <button slot="trigger">Menu ▼</button>
  <div slot="header">Settings</div>
  <button>Profile</button>
  <button>Preferences</button>
  <button>Logout</button>
  <div slot="footer">v1.2.1</div>
</sg-dropdown>
    

Propiedades

5

Prop	Tipo	Default	Descripción
`open`	`boolean`	`false`	Control open state
`align`	`'start' \| 'end' \| 'center'`	`start`	Menu alignment
`position`	`'bottom' \| 'top' \| 'left' \| 'right'`	`bottom`	Menu position
`close-on-select`	`boolean`	`true`	Close on item click
`close-on-outside`	`boolean`	`true`	Close on outside click

Eventos

3

Evento	Tipo	Descripción
`sgOpen`	`CustomEvent<void>`	Emitted when menu opens
`sgClose`	`CustomEvent<void>`	Emitted when menu closes
`sgSelect`	`CustomEvent<{ value: string }>`	Emitted when an item is selected

Slots

4

Slot	Descripción
`trigger`	Element that opens the menu
`default`	Menu items content
`header`	Optional header section
`footer`	Optional footer section

Métodos

3

Método	Retorna	Descripción
`toggle()()`	`void`	Toggle menu visibility
`show()()`	`void`	Open the menu
`hide()()`	`void`	Close the menu

Badge

Etiqueta visual para estados o contadores

Docs <sg-badge>

Variantes

Primary

Secondary

Success

Warning

Danger

Info

    
    example.html 
<sg-badge variant="primary">Primary</sg-badge>
<sg-badge variant="secondary">Secondary</sg-badge>
<sg-badge variant="success">Success</sg-badge>
<sg-badge variant="warning">Warning</sg-badge>
<sg-badge variant="danger">Danger</sg-badge>
<sg-badge variant="info">Info</sg-badge>
    

Tamaños

Small

Medium

Large

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

Propiedades

9

Prop	Tipo	Default	Descripción
`variant`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`primary`	Color variant
`size`	`'sm' \| 'md' \| 'lg'`	`md`	Badge size
`pill`	`boolean`	`false`	Fully rounded corners
`dot`	`boolean`	`false`	Show status dot
`removable`	`boolean`	`false`	Show remove button
`outline`	`boolean`	`false`	Outlined style
`icon`	`string`	`-`	Icon name (left side)
`icon-right`	`string`	`-`	Icon name (right side)
`count`	`number`	`-`	Numeric count to display

Slots

1

Slot	Descripción
`default`	Badge text content

Skeleton

Placeholder de carga

Docs <sg-skeleton>

Texto

    
    example.html 
<sg-skeleton variant="text" width="200px" height="1rem"></sg-skeleton>
<sg-skeleton variant="text" width="150px" height="1rem"></sg-skeleton>
<sg-skeleton variant="text" width="100px" height="1rem"></sg-skeleton>
    

Rectángulo

    
    example.html 
<sg-skeleton variant="rect" width="120px" height="80px"></sg-skeleton>
<sg-skeleton variant="rect" width="160px" height="100px"></sg-skeleton>
    

Círculo

    
    example.html 
<sg-skeleton variant="circle" width="40px" height="40px"></sg-skeleton>
<sg-skeleton variant="circle" width="56px" height="56px"></sg-skeleton>
<sg-skeleton variant="circle" width="72px" height="72px"></sg-skeleton>
    

Animación Pulse

    
    example.html 
<sg-skeleton variant="rect" width="150px" height="60px" animation="pulse"></sg-skeleton>

Propiedades

6

Prop	Tipo	Default	Descripción
`variant`	`'text' \| 'rect' \| 'circle'`	`text`	Shape variant
`width`	`string`	`100%`	Element width
`height`	`string`	`1rem`	Element height
`animation`	`'shimmer' \| 'pulse' \| 'none'`	`shimmer`	Animation type
`lines`	`number`	`1`	Number of lines (text)
`gap`	`string`	`0.5rem`	Gap between lines

Theme Toggle

Interruptor de tema claro/oscuro

Docs <sg-theme-toggle>

Por defecto

    
    example.html 
<sg-theme-toggle></sg-theme-toggle>

<!-- The component will:
  - Toggle data-theme attribute
  - Persist preference in localStorage
  - Sync with system preference -->
    

Propiedades

3

Prop	Tipo	Default	Descripción
`theme`	`'light' \| 'dark' \| 'auto'`	`auto`	Active theme
`storage-key`	`string`	`theme`	localStorage key
`target`	`string`	`html`	Element selector for data-theme

Eventos

1

Evento	Tipo	Descripción
`sgChange`	`CustomEvent<{ theme: 'light' \| 'dark' }>`	Theme changed

Editor de Artículos

Editor WYSIWYG con soporte Markdown

Docs <sg-article-editor>

    
    example.html 
<sg-article-editor
  value="<p>Start editing...</p>"
  mode="split"
  min-height="280"
  placeholder="Write something...">
</sg-article-editor>

<!-- Modes: html, markdown, split -->
<!-- Events: @change, @save -->
    

Propiedades

8

Prop	Tipo	Default	Descripción
`value`	`string`	`''`	Initial HTML content
`mode`	`'html' \| 'markdown' \| 'split'`	`html`	Editor mode
`placeholder`	`string`	`Start writing...`	Empty state text
`min-height`	`number`	`200`	Minimum height (px)
`max-height`	`number`	`-`	Maximum height (px)
`readonly`	`boolean`	`false`	Disable editing
`autofocus`	`boolean`	`false`	Focus on mount
`toolbar`	`string[]`	`all`	Visible toolbar items

Eventos

4

Evento	Tipo	Descripción
`sgChange`	`CustomEvent<{ html: string, text: string }>`	Content changed
`sgSave`	`CustomEvent<{ html: string, markdown: string }>`	Ctrl+S pressed
`sgFocus`	`CustomEvent<void>`	Editor focused
`sgBlur`	`CustomEvent<void>`	Editor blurred

Métodos

5

Método	Retorna	Descripción
`getHTML()()`	`string`	Get current HTML content
`getMarkdown()()`	`string`	Get content as Markdown
`setContent(html)()`	`void`	Set editor content
`clear()()`	`void`	Clear all content
`focus()()`	`void`	Focus the editor

Works with your stack

Web Components

React

Angular

Componentes

Botón

Propiedades

Eventos

Slots

Icono

Propiedades

Badge

Propiedades

Slots

Skeleton

Propiedades

Theme Toggle

Propiedades

Eventos

Editor de Artículos

Propiedades

Eventos

Métodos