/

Blade Kit

Installation

You can install the package via composer:

composer require elegantly/blade-kit

Button

A button with icons, colors and loading state

Sized 

1<x-kit::button class="rounded-md font-semibold ring-1 ring-inset" color="white">
2    Button
3</x-kit::button>

With Icon 

 1<x-kit::button class="rounded-md font-semibold ring-1 ring-inset" color="white">
 2    <x-slot:icon>
 3        <span class="icon-[heroicons--check-circle]"></span>
 4    </x-slot:icon>
 5</x-kit::button>
 6<x-kit::button class="rounded-md font-semibold ring-1 ring-inset" color="white">
 7    <x-slot:icon>
 8        <span class="icon-[heroicons--check-circle]"></span>
 9    </x-slot:icon>
10    Button
11</x-kit::button>

Loading 

 1<x-kit::button class="rounded-md font-semibold ring-1 ring-inset" color="white"
 2    loading>
 3    <x-slot:icon>
 4        <span class="icon-[heroicons--check-circle]"></span>
 5    </x-slot:icon>
 6</x-kit::button>
 7 
 8<x-kit::button class="rounded-md font-semibold ring-1 ring-inset" color="white"
 9    loading>
10    <x-slot:icon>
11        <span class="icon-[heroicons--check-circle]"></span>
12    </x-slot:icon>
13    Button
14</x-kit::button>

Colored 

1<x-kit::button class="rounded-md font-semibold" color="white">
2    Button
3</x-kit::button>

With border 

1<x-kit::button color="emerald" class="rounded-md border font-semibold">
2    Button
3</x-kit::button>

With inset ring 

1<x-kit::button color="emerald" class="rounded-md font-semibold ring-1 ring-inset">
2    Button
3</x-kit::button>

As radio (no JS) 

1<x-kit::button.radio name="button-radio" class="rounded-md font-semibold"
2    color="white" value="0">
3    Value 0
4</x-kit::button.radio>
5<x-kit::button.radio class="rounded-md font-semibold" color="white"
6    name="button-radio" value="1" color-checked="emerald">
7    Value 1
8</x-kit::button.radio>

Tags

A tag with icons and colors

Sized

xs sm md lg xl 
1<x-kit::tag class="rounded-md font-semibold" color="white">
2    Tag
3</x-kit::tag>

With Icon

Tag Tag 
 1<x-kit::tag class="rounded-md font-semibold ring-1 ring-inset" color="white">
 2    <x-slot:icon>
 3        <span class="icon-[heroicons--check-circle]"></span>
 4    </x-slot:icon>
 5</x-kit::tag>
 6<x-kit::tag class="rounded-md font-semibold ring-1 ring-inset" color="white">
 7    <x-slot:icon>
 8        <span class="icon-[heroicons--check-circle]"></span>
 9    </x-slot:icon>
10    Tag
11</x-kit::tag>
12<x-kit::tag class="rounded-md font-semibold ring-1 ring-inset" color="white">
13    Tag
14    <x-slot:icon-right>
15        <span class="icon-[heroicons--check-circle]"></span>
16    </x-slot:icon-right>
17</x-kit::tag>

Colored

white black gray rose emerald amber
rose-light emerald-light amber-light 
1<x-kit::tag class="rounded-md font-semibold" color="white">
2    Tag
3</x-kit::tag>

With border

emerald emerald-light 
1<x-kit::tag color="emerald" class="rounded-md border font-semibold">
2    Tag
3</x-kit::tag>

With inset ring

emerald emerald-light 
1<x-kit::tag color="emerald" class="rounded-md font-semibold ring-1 ring-inset">
2    Tag
3</x-kit::tag>

Inputs

An input with icons and colors

Sized 

1<x-kit::input size="lg" class="rounded-md font-semibold" color="white"
2    placeholder="Aa" />

Colored 

1<x-kit::input color="emerald" class="rounded-md font-semibold" placeholder="Aa" />

With Icon 

1<x-kit::input color="white" class="rounded-md font-semibold" placeholder="Aa">
2    <x-slot:icon>
3        <span class="icon-[heroicons--check-circle]"></span>
4    </x-slot:icon>
5    <x-slot:icon-right>
6        <span class="icon-[heroicons--clipboard]"></span>
7    </x-slot:icon-right>
8</x-kit::input>

Segments

Segmented buttons with icons and colors. All parameters from the button component can be used.

Sized 

 1<x-kit::segments color="gray" class="rounded-lg">
 2    <x-kit::segments.button class="rounded-md font-semibold" size="sm"
 3        name="segment-name" checked>
 4        Option 1
 5    </x-kit::segments.button>
 6    <x-kit::segments.button class="rounded-md font-semibold" size="sm"
 7        name="segment-name">
 8        Option 2
 9    </x-kit::segments.button>
10</x-kit::segments>

Colored 

 1<x-kit::segments color="gray" class="rounded-lg">
 2    <x-kit::segments.button class="rounded-md font-semibold" color="emerald"
 3        name="segment-name" checked>
 4        Option 1
 5    </x-kit::segments.button>
 6    <x-kit::segments.button class="rounded-md font-semibold" color="emerald"
 7        name="segment-name">
 8        Option 2
 9    </x-kit::segments.button>
10</x-kit::segments>

With Icon 

1<x-kit::segments color="gray" class="rounded-lg">
2    <x-kit::segments.button class="rounded-md font-semibold" name="segment-name"
3        checked>
4        Option 1
5    </x-kit::segments.button>
6    <x-kit::segments.button class="rounded-md font-semibold" name="segment-name">
7        Option 2
8    </x-kit::segments.button>
9</x-kit::segments>

Select

HTML select styled with button aesthetics.

Sized 

1<x-kit::select class="rounded-md font-semibold" size="sm" name="select-fr">
2    <option value="en">English</option>
3    <option value="fr">French</option>
4</x-kit::select>

Colored 

1<x-kit::select class="rounded-md font-semibold" color="rose" name="select-fr">
2    <option value="en">English</option>
3    <option value="fr">French</option>
4</x-kit::select>

Switch

Custom-styled radio inputs with switch design.

Sized 

1<x-kit::switch class="rounded-md font-semibold" name="switch-base">
2    Value
3</x-kit::switch>

Colored 

1<x-kit::switch class="rounded-md font-semibold" name="switch" color="rose">
2    Value
3</x-kit::switch>