Components

Buttons

Click, Tap, Push. They're the action movie stars of your application.

Contributors for this component

Primary

@props([
    'disabled' => false,
    'size' => 'md',
    'rounded' => 'lg',
])
 
@php
    $sizes = [
        'xs' => 'button-size-xs',
        'sm' => 'button-size-sm',
        'md' => 'button-size-md',
        'lg' => 'button-size-lg',
        'xl' => 'button-size-xl',
    ];
 
    $disabledClasses = $disabled ? 'button-primary-isDisabled' : ' button-primary-notDisabled';
 
    $baseClass = 'button-primary-base ';
 
    $classes = $baseClass . ' ' . $sizes[$size] . ' ' . $disabledClasses . ' ' . 'rounded-' . $rounded;
@endphp
 
<button {{ $attributes->merge(['type' => 'button', 'class' => $classes, 'disabled' => $disabled]) }}>
    {{ $slot }}
</button>

LaraBlade example of preview

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <div>
        <x-lb.element.button.primary size="xs">Primary xs</x-lb.element.button.primary>
    </div>
    <div>
        <x-lb.element.button.primary size="sm" rounded="full">Rounded full sm</x-lb.element.button.primary>
    </div>
    <div>
        <x-lb.element.button.primary disabled="true" size="md">Disabled md</x-lb.element.button.primary>
    </div>
    <div>
        <x-lb.element.button.primary size="lg" rounded="md">Rounded-md lg</x-lb.element.button.primary>
    </div>
    <div>
        <x-lb.element.button.primary size="xl" rounded="none">Rounded none xl</x-lb.element.button.primary>
    </div>
</div>

Data and Props

Propreties and props that are avaiable for this component

Property

Description

slot

Allows for dynamic inner content to be provided when the component is used.

type

Can make the button submit or default type button

size

Adjust the size of the button.

rounded

Pass in lg, md, full ect to change the radious of the button.

disabled

Toggle the disabled state

Other Examples

Text

@props([
    'disabled' => false,
    'size' => 'md',
    'rounded' => 'lg',
])
 
@php
    $sizes = [
        'xs' => 'px-2.5 h-6 text-xs',
        'sm' => 'px-3 h-8  text-sm leading-4',
        'md' => 'px-4 h-10  text-sm',
        'lg' => 'px-4 h-12 text-base',
        'xl' => 'px-6 h-16 text-lg',
    ];
 
    $disabledClasses = $disabled ? ' cursor-not-allowed text-neutral-300' : 'text-netural-800  hover:text-primary-500';
 
    $default = 'flex flex-none flex-col justify-center items-center text-center font-semibold  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 transition ease-in-out duration-150 ';
 
    $classes = $default . ' ' . $sizes[$size] . ' ' . $disabledClasses . ' ' . 'rounded-' . $rounded;
@endphp
 
<button {{ $attributes->merge(['type' => 'button', 'class' => $classes, 'disabled' => $disabled]) }}>
    {{ $slot }}
</button>

Ghost

@props([
    'disabled' => false,
    'size' => 'md',
    'rounded' => 'lg',
])
 
@php
    $sizes = [
        'xs' => 'px-2.5 h-6 text-xs',
        'sm' => 'px-3 h-8  text-sm leading-4',
        'md' => 'px-4 h-10  text-sm',
        'lg' => 'px-4 h-12 text-base',
        'xl' => 'px-6 h-16 text-lg',
    ];
 
    $disabledClasses = $disabled ? ' cursor-not-allowed bg-primary-100' : 'hover:bg-primary-500 hover:text-white';
 
    $default = 'flex flex-none flex-col justify-center items-center text-center font-semibold  text-netural-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 transition ease-in-out duration-150 ';
 
    $classes = $default . ' ' . $sizes[$size] . ' ' . $disabledClasses . ' ' . 'rounded-' . $rounded;
@endphp
 
<button {{ $attributes->merge(['type' => 'button', 'class' => $classes, 'disabled' => $disabled]) }}>
    {{ $slot }}
</button>

Danger

@props([
    'disabled' => false,
    'size' => 'md',
    'rounded' => 'lg',
])
 
@php
    $sizes = [
        'xs' => 'px-2.5 h-6 text-xs',
        'sm' => 'px-3 h-8  text-sm leading-4',
        'md' => 'px-4 h-10  text-sm',
        'lg' => 'px-4 h-12 text-base',
        'xl' => 'px-6 h-16 text-lg',
    ];
 
    $disabledClasses = $disabled ? ' cursor-not-allowed bg-red-300' : ' bg-red-500 hover:bg-red-400';
 
    $default = 'flex flex-none flex-col justify-center items-center text-center font-semibold  text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 transition ease-in-out duration-150 ';
 
    $classes = $default . ' ' . $sizes[$size] . ' ' . $disabledClasses . ' ' . 'rounded-' . $rounded;
@endphp
 
<button {{ $attributes->merge(['type' => 'button', 'class' => $classes, 'disabled' => $disabled]) }}>
    {{ $slot }}
</button>

Border

@props([
    'disabled' => false,
    'size' => 'md',
    'rounded' => 'lg',
])
 
@php
    $sizes = [
        'xs' => 'px-2.5 h-6 text-xs',
        'sm' => 'px-3 h-8  text-sm leading-4',
        'md' => 'px-4 h-10  text-sm',
        'lg' => 'px-4 h-12 text-base',
        'xl' => 'px-6 h-16 text-lg',
    ];
 
    $disabledClasses = $disabled ? ' cursor-not-allowed border-primary-100 text-neutral-400' : 'text-netural-800 border-2 border-neutral-200 hover:border-primary-500 hover:text-primary-500';
 
    $default = 'flex flex-none flex-col justify-center items-center text-center font-semibold   focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 transition ease-in-out duration-150 ';
 
    $classes = $default . ' ' . $sizes[$size] . ' ' . $disabledClasses . ' ' . 'rounded-' . $rounded;
@endphp
 
<button {{ $attributes->merge(['type' => 'button', 'class' => $classes, 'disabled' => $disabled]) }}>
    {{ $slot }}
</button>

alerts modals