ddfsn / blade-components
  1. Blade Components
  5. Button

Button

Primary control for any action, supporting both anchors and buttons.

Usage

<x-btn>Button</x-btn>

Component API

Attribute Default Description
style primary string
Possible values primary, secondary, ghost, info, warning or danger.
size null string || null
Possible values null, sm, lg or xl.
href null string || null
When set, renders an <a> element instead of a <button> element.
alignment center string
Controls text alignment on the button label. Possible values left, center or right.
disabled false bool
Whether the button is disabled.

Style

Control the button style by supplying the style="" attribute.

<div class="flex justify-between">
    <x-btn style="primary">Button</x-btn>
    <x-btn style="secondary">Button</x-btn>
    <x-btn style="ghost">Button</x-btn>
</div>

<div class="flex justify-between">
    <x-btn style="info">Button</x-btn>
    <x-btn style="warning">Button</x-btn>
    <x-btn style="danger">Button</x-btn>
</div>

Size

Control the button size by supplying the size="" attribute.

<div class="flex items-center justify-between space-x-2">
    <x-btn size="lg">Button</x-btn>
    <x-btn>Button</x-btn>
    <x-btn size="sm">Button</x-btn>
</div>

Link

Buttons can be used as an <a> element by supplying the href="" attribute.

Button
 
<div class="flex justify-center">
    <x-btn href="#">Button</x-btn>
</div>

Disabled State

Both linked buttons and traditional buttons can be set to a disabled state by supplying the disabled boolean attribute.

<div class="flex justify-center">
    <x-btn disabled>Button</x-btn>
</div>

Prefix and Suffix

Buttons can be prefixed or suffixed with simple text elements for additional clarity by utilizing the prefix and suffix component slots.

<div class="flex justify-between">
    <x-btn>
        <x-slot:prefix>
            <span class="text-gray-400">1.</span>
        </x-slot:prefix>
        Button
    </x-btn>
    <x-btn>
        <x-slot:prefix>
            <span class="text-gray-400">1.</span>
        </x-slot:prefix>
        Button
        <x-slot:suffix>
            <span class="text-gray-400">2.</span>
        </x-slot:suffix>
    </x-btn>
    <x-btn>
        Button
        <x-slot:suffix>
            <span class="text-gray-400">1.</span>
        </x-slot:suffix>
    </x-btn>
</div>

Previous

Badge

Next

Card