tailwindcss/docs/source/styles/buttons.blade.md

extends	title
_layouts.markdown	Buttons

Buttons

We don't ship any default button components because every app has it's own visual style and Tailwind tries to be as unopinionated as possible about how your project should look.

That said, buttons are easy to build by combining utility classes.

Here's a bunch of examples:

Simple

@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) Button

@slot('code')

Button Button

@endslot @endcomponent

---

Pill

@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) Button @endcomponent

---

Outline

@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) Button @endcomponent

---

Bordered

@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) Button @endcomponent

---

Disabled

@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) Button @endcomponent

---

3D

@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) Button @endcomponent

---

Elevated

@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) Button @endcomponent

---

Button Groups

@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])

Prev Next

@endcomponent

---

w/Icon

@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) Download @endcomponent