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 de <x-kore::button-group>

Desde la 2.0 el grupo es un role="group" con nombre: tres botones sueltos y un grupo de tres no son lo mismo para un lector de pantalla —sin el rol no hay nada que diga que van juntos ni dónde acaba el conjunto—.

ariaLabel pone ese nombre, y el valor por defecto («Acciones») sale de kore-ui.ui.translations.button_group. Quien sabe de qué es el grupo es quien lo usa:

&lt;x-kore::button-group aria-label="Alineación del texto"&gt;…&lt;/x-kore::button-group&gt;
&lt;x-kore::button-group aria-label="Alineación del texto"&gt;…&lt;/x-kore::button-group&gt;

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',
    ],
],
Cargando