K
KoreUI

Button

UI

Botón versátil con soporte para variantes, colores, tamaños, iconos, estados de loading y enlaces.

Uso básico

<x-kore::button label="Guardar" />
<x-kore::button label="Cancelar" variant="outline" />
<x-kore::button label="Eliminar" color="destructive" />
<x-kore::button label="Guardar" />
<x-kore::button label="Cancelar" variant="outline" />
<x-kore::button label="Eliminar" color="destructive" />

Variantes

Cinco variantes disponibles para diferentes jerarquías visuales.

<x-kore::button label="Solid" variant="solid" />
<x-kore::button label="Outline" variant="outline" />
<x-kore::button label="Ghost" variant="ghost" />
<x-kore::button label="Soft" variant="soft" />
<x-kore::button label="Link" variant="link" />
<x-kore::button label="Solid" variant="solid" />
<x-kore::button label="Outline" variant="outline" />
<x-kore::button label="Ghost" variant="ghost" />
<x-kore::button label="Soft" variant="soft" />
<x-kore::button label="Link" variant="link" />

Colores

Seis colores semánticos que se adaptan automáticamente al dark mode.

<x-kore::button label="Primary" color="primary" />
<x-kore::button label="Secondary" color="secondary" />
<x-kore::button label="Destructive" color="destructive" />
<x-kore::button label="Success" color="success" />
<x-kore::button label="Warning" color="warning" />
<x-kore::button label="Info" color="info" />
<x-kore::button label="Primary" color="primary" />
<x-kore::button label="Secondary" color="secondary" />
<x-kore::button label="Destructive" color="destructive" />
<x-kore::button label="Success" color="success" />
<x-kore::button label="Warning" color="warning" />
<x-kore::button label="Info" color="info" />

Tamaños

Tres tamaños: sm, md (default), lg.

<x-kore::button label="Small" size="sm" />
<x-kore::button label="Medium" size="md" />
<x-kore::button label="Large" size="lg" />
<x-kore::button label="Small" size="sm" />
<x-kore::button label="Medium" size="md" />
<x-kore::button label="Large" size="lg" />

Con iconos

Iconos Lucide a la izquierda, derecha, o ambos lados.

<x-kore::button label="Guardar" icon="save" />
<x-kore::button label="Siguiente" icon-right="arrow-right" />
<x-kore::button label="Copiar" icon="copy" icon-right="check" />
<x-kore::button label="Guardar" icon="save" />
<x-kore::button label="Siguiente" icon-right="arrow-right" />
<x-kore::button label="Copiar" icon="copy" icon-right="check" />

Loading

Estado de loading con spinner y botón deshabilitado.

<x-kore::button label="Guardando..." :loading="true" />
<x-kore::button label="Guardando..." :loading="true" />

Como enlace

Cuando se pasa href, renderiza como <a> manteniendo el estilo de botón.

Ir a inicio Docs 
<x-kore::button label="Ir a inicio" href="/" />
<x-kore::button label="Docs" href="#" target="_blank" icon="external-link" />
<x-kore::button label="Ir a inicio" href="/" />
<x-kore::button label="Docs" href="#" target="_blank" icon="external-link" />

Button Group

Agrupa botones con bordes conectados.

<x-kore::button-group>
    <x-kore::button label="Izquierda" />
    <x-kore::button label="Centro" />
    <x-kore::button label="Derecha" />
</x-kore::button-group>
<x-kore::button-group>
    <x-kore::button label="Izquierda" />
    <x-kore::button label="Centro" />
    <x-kore::button label="Derecha" />
</x-kore::button-group>

Props

Prop Tipo Default Descripción
label string|null null Texto del botón
icon string|null null Icono Lucide a la izquierda
iconRight string|null null Icono Lucide a la derecha
href string|null null URL — renderiza como <a>
target string|null null Target del enlace (_blank, etc.)
size string md Tamaño: sm, md, lg
variant string solid Variante: solid, outline, ghost, soft, link
color string primary Color: primary, secondary, destructive, success, warning, info
loading bool false Muestra spinner y deshabilita
disabled bool false Estado deshabilitado
block bool false Ancho completo (w-full)
type string button Tipo HTML: button, submit, reset

Configuración

Puedes personalizar los defaults en config/kore-ui.php.

config/kore-ui.php 
// config/kore-ui.php
'ui' => [
    'size' => 'md',
    'button' => [
        'variant' => 'solid',
        'color' => 'primary',
    ],
],
// config/kore-ui.php
'ui' => [
    'size' => 'md',
    'button' => [
        'variant' => 'solid',
        'color' => 'primary',
    ],
],