generated from boboko/starter
35 lines
1.3 KiB
PHP
35 lines
1.3 KiB
PHP
@props([
|
|
'tag' => 'button',
|
|
'href' => null,
|
|
'type' => 'button',
|
|
'size' => 'lg',
|
|
'position' => 'relative',
|
|
])
|
|
|
|
@php
|
|
$tag = $href ? 'a' : $tag;
|
|
|
|
$sizeClasses = match($size) {
|
|
'sm' => 'py-2 px-6 text-sm',
|
|
'md' => 'py-3.5 px-6 text-base',
|
|
default => 'py-5 px-[46px] text-[19px]',
|
|
};
|
|
|
|
// $position defaults to 'relative' (needed so the ::before/::after layers
|
|
// in .btn-primary position against the button itself), but callers that
|
|
// need to place the button absolutely (e.g. a hover-reveal CTA over a
|
|
// product image) must pass position="absolute" here rather than adding
|
|
// "absolute" via the class prop — Tailwind's generated stylesheet always
|
|
// orders the "relative" utility after "absolute", so on a class clash
|
|
// "relative" silently wins and the button never actually gets positioned.
|
|
$class = 'btn-primary '.$position.' isolate inline-flex items-center justify-center border border-black font-display font-bold italic text-black cursor-pointer no-underline uppercase ' . $sizeClasses;
|
|
|
|
$attrs = $href
|
|
? $attributes->merge(['href' => $href, 'class' => $class])
|
|
: $attributes->merge(['type' => $type, 'class' => $class]);
|
|
@endphp
|
|
|
|
<{{ $tag }} {{ $attrs }}>
|
|
<span class="relative z-[1]">{{ $slot }}</span>
|
|
</{{ $tag }}>
|