@props([
'type' => 'button', // Tipo de botón: button, submit, reset (solo para botones)
'href' => null, // URL si es un enlace
'route' => null, // URL si es un enlace
'target' => '_self', // Target del enlace (_self, _blank, etc.)
'label' => '', // Texto del botón
'size' => 'md', // Tamaño: xs, sm, md, lg, xl
'variant' => 'primary', // Color del botón (primary, secondary, success, danger, warning, info, dark)
'labelStyle' => false, // Usa `btn-label-*`
'outline' => false, // Habilitar estilo outline
'textStyle' => false, // Habilitar estilo de texto
'rounded' => false, // Habilitar bordes redondeados
'block' => false, // Convertir en botón de ancho completo
'waves' => true, // Habilitar efecto Vuexy (waves-effect)
'icon' => '', // Clases del ícono (ej: 'ti ti-home')
'iconOnly' => false, // Botón solo con ícono
'iconPosition' => 'left', // Posición del ícono: left, right
'active' => false, // Activar estado de botón
'disabled' => false, // Deshabilitar botón
'attributes' => new \Illuminate\View\ComponentAttributeBag([]), // Atributos adicionales
])
@php
// Generar clases dinámicas
$classes = [
'btn',
$labelStyle ? "btn-label-$variant" : '',
$outline ? "btn-outline-$variant" : '',
$textStyle ? "btn-text-$variant" : '',
$labelStyle || $outline || $textStyle ? '' : "btn-$variant",
$rounded ? 'rounded-pill' : '',
$block ? 'd-block w-100' : '',
$waves ? 'waves-effect' : '',
$size !== 'md' ? "btn-$size" : '',
$active ? 'active' : '',
$disabled ? 'disabled' : '',
$iconOnly ? 'btn-icon' : '',
];
@endphp
@if ($href || $route)
{{-- Si es un enlace --}}
merge(['class' => implode(' ', array_filter($classes)), 'href' => ($href?? route($route)), 'target' => $target]) }}>
@if ($icon && $iconPosition === 'left')
@endif
{{ $label }}
@if ($icon && $iconPosition === 'right')
@endif
@else
{{-- Si es un botón --}}
@endif