/

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" color="white">
2    Button
3</x-kit::button>

With Icon 

1<x-kit::button icon="heroicon-o-check-circle" class="rounded-md font-semibold"
2    color="white" />
3<x-kit::button icon="heroicon-o-check-circle" class="rounded-md font-semibold"
4    color="white">Button</x-kit::button>
5<x-kit::button icon-right="heroicon-o-check-circle" class="rounded-md font-semibold"
6    color="white">Button</x-kit::button>

Loading 

1<x-kit::button icon="heroicon-o-check-circle" class="rounded-md font-semibold"
2    color="white" loading />
3<x-kit::button icon="heroicon-o-check-circle" class="rounded-md font-semibold"
4    color="black" loading>Button</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 icon="heroicon-o-check-circle" class="rounded-md font-semibold"
2    color="white" />
3<x-kit::tag icon="heroicon-o-check-circle" class="rounded-md font-semibold"
4    color="white">Tag</x-kit::tag>
5<x-kit::tag icon-right="heroicon-o-check-circle" class="rounded-md font-semibold"
6    color="white">Tag</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" placeholder="Aa" />

Colored 

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

With Icon 

1<x-kit::input icon="heroicon-o-check-circle" color="white"
2class="rounded-md font-semibold" placeholder="Aa" />
3<x-kit::input icon-right="heroicon-o-check-circle" color="white"
4    class="rounded-md font-semibold" placeholder="Aa" />
5<x-kit::input icon="heroicon-o-check" icon-right="heroicon-o-clipboard" color="white"
6    class="rounded-md font-semibold" placeholder="Aa" />

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 icon="heroicon-o-check-circle"
 3        class="rounded-md font-semibold" name="segment-name" checked>
 4        Option 1
 5    </x-kit::segments.button>
 6    <x-kit::segments.button icon="heroicon-o-check-circle"
 7        class="rounded-md font-semibold" name="segment-name">
 8        Option 2
 9    </x-kit::segments.button>
10</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>