Laden...

Design System

Classes and styles

Click any buttons to increment the count

Buttons

Count: 0

The classes are custom made

Normal Buttons

Button Icons

Icon buttons with different styles:

<button class="btn icon-left btn-primary">
    <Icon name="akar-icons:arrow-left" class="size-6" />
    Button
</button>
<button class="btn icon-right btn-primary">
    Button
    <Icon name="akar-icons:arrow-right" class="size-6" />
</button>

btn

btn btn-primary

btn btn-secondary

btn btn-success

btn btn-danger

btn btn-warning

btn btn-info

btn btn-light

btn btn-dark

Icons

We use Nuxt icons

<button class="btn btn-icon">
    <Icon name="akar-icons:arrow-left" class="size-6" />
</button>

Components

Color Picker

Live Preview

v-model Value

{
  "r": 21,
  "g": 128,
  "b": 251,
  "a": 1
}

Repair Status Tags

In behandeling

Voltooid

Mislukt

Wachten op onderdelen

Wachten op ophalen

Wachten op monteur

Service Cards

Service 1

This is a description

Niet beschikbaar

Lees meer

Service 2

This is a description

Particulier & Zakelijk

Lees meer

Content goes here

Service Dropdown

Selecteer een Dienst

Selecteer een dienst uit de lijst.

Separated media viewer

Modal

Toast

Media Viewer

Common Tags

Tag 1

Available

Unavailable

Personal

Enterprise

Both

PINK!

Code puncher

Other

IP Address Fetcher

Toggle IP Address