Tailwind CSS Button - Versoly UI

Added in 1.0

Example

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-tertiary">Tertiary</button>
<button class="btn btn-neutral">Neutral</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<a href="#" class="btn btn-primary">Primary</button>
<a href="#" class="btn btn-secondary">Secondary</button>
<a href="#" class="btn btn-tertiary">Tertiary</button>
<a href="#" class="btn btn-neutral">Neutral</button>
<a href="#" class="btn btn-success">Success</button>
<a href="#" class="btn btn-info">Info</button>
<a href="#" class="btn btn-danger">Danger</button>
<a href="#" class="btn btn-warning">Warning</button>

Sizes

<button class="btn btn-primary btn-xs">btn-xs</button>
<button class="btn btn-primary btn-sm">btn-sm</button>
<button class="btn btn-primary">btn-</button>
<button class="btn btn-primary btn-lg">btn-lg</button>
<button class="btn btn-primary btn-xl">btn-xl</button>

Outline

<button class="btn btn-outline btn-primary text-capitalize">primary</button>
<button class="btn btn-outline btn-secondary text-capitalize">secondary</button>
<button class="btn btn-outline btn-tertiary text-capitalize">tertiary</button>
<button class="btn btn-outline btn-neutral text-capitalize">neutral</button>
<button class="btn btn-outline btn-success text-capitalize">success</button>
<button class="btn btn-outline btn-info text-capitalize">info</button>
<button class="btn btn-outline btn-danger text-capitalize">danger</button>
<button class="btn btn-outline btn-warning text-capitalize">warning</button>

Subtle

<button class="btn btn-primary btn-subtle text-capitalize">primary</button>
<button class="btn btn-secondary btn-subtle text-capitalize">secondary</button>
<button class="btn btn-tertiary btn-subtle text-capitalize">tertiary</button>
<button class="btn btn-neutral btn-subtle text-capitalize">neutral</button>
<button class="btn btn-success btn-subtle text-capitalize">success</button>
<button class="btn btn-info btn-subtle text-capitalize">info</button>
<button class="btn btn-danger btn-subtle text-capitalize">danger</button>
<button class="btn btn-warning btn-subtle text-capitalize">warning</button>

Ghost (hover)

<button class="btn btn-ghost btn-primary text-capitalize">primary</button>
<button class="btn btn-ghost btn-secondary text-capitalize">secondary</button>
<button class="btn btn-ghost btn-tertiary text-capitalize">tertiary</button>
<button class="btn btn-ghost btn-neutral text-capitalize">neutral</button>
<button class="btn btn-ghost btn-success text-capitalize">success</button>
<button class="btn btn-ghost btn-info text-capitalize">info</button>
<button class="btn btn-ghost btn-danger text-capitalize">danger</button>
<button class="btn btn-ghost btn-warning text-capitalize">warning</button>
<button class="btn btn-primary btn-link text-capitalize">primary</button>
<button class="btn btn-secondary btn-link text-capitalize">secondary</button>
<button class="btn btn-tertiary btn-link text-capitalize">tertiary</button>
<button class="btn btn-neutral btn-link text-capitalize">neutral</button>
<button class="btn btn-success btn-link text-capitalize">success</button>
<button class="btn btn-info btn-link text-capitalize">info</button>
<button class="btn btn-danger btn-link text-capitalize">danger</button>
<button class="btn btn-warning btn-link text-capitalize">warning</button>

Pill

<button class="btn btn-primary rounded-full text-capitalize">primary</button>
<button class="btn btn-secondary rounded-full text-capitalize">secondary</button>
<button class="btn btn-tertiary rounded-full text-capitalize">tertiary</button>
<button class="btn btn-neutral rounded-full text-capitalize">neutral</button>
<button class="btn btn-success rounded-full text-capitalize">success</button>
<button class="btn btn-info rounded-full text-capitalize">info</button>
<button class="btn btn-danger rounded-full text-capitalize">danger</button>
<button class="btn btn-warning rounded-full text-capitalize">warning</button>

Block

<button class="btn btn-primary w-full btn-xs">btn-xs</button>
<button class="btn btn-primary w-full btn-sm">btn-sm</button>
<button class="btn btn-primary w-full btn-null">btn-null</button>
<button class="btn btn-primary w-full btn-lg">btn-lg</button>
<button class="btn btn-primary w-full btn-xl">btn-xl</button>

CTA

Used for call to actions to make them stand out.

<button class="btn btn-cta">Call To Action</button>

Animated

Used to bring a bit of animation to a button when hovered.

<button class="btn btn-primary btn-ani">Animated</button>