Buttons

Regular button

Use the .btn class to create a button.

<button class="btn">Button</button>

<button class="btn" disabled>Button</button>

<a href="#" class="btn">Button as anchor tag</a>

<a href="#" class="btn" disabled>Button as anchor tag</a>

Regular buttons on dark backgrounds

<button class="btn dark">Button</button>

<button class="btn dark" disabled>Button</button>

<a href="#" class="btn dark">Button as anchor tag</a>

<a href="#" class="btn dark" disabled>Button as anchor tag</a>

Primary button

Primary actions.

<button class="btn btn-primary">Button</button>

<button class="btn btn-primary" disabled>Button</button>
<a href="#" class="btn btn-primary">Button with anchor tag</a>

Primary buttons on dark backgrounds

<button class="btn btn-primary dark">Button</button>

<button class="btn btn-primary dark" disabled>Button</button>

<a href="#" class="btn btn-primary dark">Button as anchor tag</a>

<a href="#" class="btn btn-primary dark" disabled>Button as anchor tag</a>

Secondary button

Secondary actions.

<button class="btn btn-secondary">Secondary button</button>

<button class="btn btn-secondary" disabled>Secondary button</button>

<a href="#" class="btn btn-secondary">Secondary button as anchor tag</a>

<a href="#" class="btn btn-secondary" disabled>Secondary button as anchor tag</a>

Secondary buttons on dark backgrounds

<button class="btn btn-secondary dark">Button</button>

<button class="btn btn-secondary dark" disabled>Button</button>

<a href="#" class="btn btn-secondary dark">Button as anchor tag</a>

<a href="#" class="btn btn-secondary dark" disabled>Button as anchor tag</a>

Danger button

For destructive actions.

<button class="btn btn-danger">Danger button</button>

<button class="btn btn-danger" disabled>Danger button</button>

<a href="#" class="btn btn-danger">Danger button as anchor tag</a>

<a href="#" class="btn btn-danger" disabled>Danger button as anchor tag</a>

Danger buttons on dark backgrounds

<button class="btn btn-danger dark">Button</button>

<button class="btn btn-danger dark" disabled>Button</button>

<a href="#" class="btn btn-danger dark">Button as anchor tag</a>

<a href="#" class="btn btn-danger dark" disabled>Button as anchor tag</a>

Link button

Link actions.

<button class="btn btn-link">Link Button</button>

<button class="btn btn-link" disabled>Link Button</button>

<a href="#" class="btn btn-link">Link Button as anchor tag</a>

<a href="#" class="btn btn-link" disabled>Link Button as anchor tag</a>

<button class="btn btn-link btn-link--danger">Link Danger Button</button>

<button class="btn btn-link btn-link--danger" disabled>Link Danger Button</button>

Link buttons on dark backgrounds

<button class="btn btn-link dark">Button</button>

<button class="btn btn-link dark" disabled>Button</button>

<a href="#" class="btn btn-link dark">Button as anchor tag</a>

<a href="#" class="btn btn-link dark" disabled>Button as anchor tag</a>

Modifiers

Use standard Tailwind modifiers to make them larger, rounded:

<button class="btn text-xs">Tiny</button>

<button class="btn text-f6">Smaller</button>

<button class="btn rounded-full">Rounded</button>

<button class="btn text-f5">Larger</button>

<button class="btn text-f3">Huge</button>

Show modal