# Buttons and Variants — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/k-button

> Consistent interactive elements.

## Base styles plus variant styles

A button combines base utilities (padding, radius, font, focus ring, transitions, disabled styles) with variant utilities (primary, secondary, danger) and sizes. Define them once in a component so every button looks and behaves the same. Include `focus-visible:` outlines, `disabled:opacity-50 disabled:cursor-not-allowed`, and enough padding for touch targets (about 44px tall on mobile).

## Reusable UI from utilities

Buttons, cards and forms show how to combine utilities into consistent, reusable pieces.

![Three ideas: buttons and variants, forms, extracting components.](assets/figures/tailwind/section-6-map.svg) — Figure 6.1 — Buttons, forms and component extraction.

## Primary and secondary buttons

Shared base classes with variants.

```html
<button class="inline-flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-semibold text-white
               transition-colors hover:bg-cyan-700 focus-visible:outline-2 focus-visible:outline-offset-2
               focus-visible:outline-cyan-600 disabled:cursor-not-allowed disabled:opacity-50">
  Save changes
</button>

<button class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm
               font-semibold text-gray-900 hover:bg-gray-50 focus-visible:outline-2 focus-visible:outline-cyan-600">
  Cancel
</button>
```

## Use real buttons and links

Use <button> for actions and <a> for navigation; styling a div as a button loses keyboard and screen reader support.

**Quiz:** Which classes give a disabled button visual feedback?

- [ ] focus:hidden
- [ ] hover:opacity-50
- [x] disabled:opacity-50 disabled:cursor-not-allowed
- [ ] opacity-0

*Answer:* disabled:opacity-50 disabled:cursor-not-allowed. The disabled: variant targets :disabled.