tadoku-ui

Foundation

Components

Buttons

Buttons

1<div className="h-stack spaced">
2  <button className="btn primary">Primary</button>
3  <button className="btn secondary">Secondary</button>
4  <button className="btn">Tertiary (default)</button>
5  <button className="btn danger">Danger</button>
6  <button className="btn ghost">Ghost</button>
7</div>

Disabled button

1<div className="h-stack spaced">
2  <button className="btn primary" disabled>Primary</button>
3  <button className="btn secondary" disabled>Secondary</button>
4  <button className="btn" disabled>Tertiary (default)</button>
5  <button className="btn danger" disabled>Danger</button>
6  <button className="btn ghost" disabled>Ghost</button>
7</div>

Button links

PrimarySecondaryTertiary (default)DangerGhost
1<div className="space-x-3">
2  <a href="#" className="btn primary">Primary</a>
3  <a href="#" className="btn secondary">Secondary</a>
4  <a href="#" className="btn">Tertiary (default)</a>
5  <a href="#" className="btn danger">Danger</a>
6  <a href="#" className="btn ghost">Ghost</a>
7</div>

Icon buttons

1<div className="h-stack spaced">
2  <button className="btn primary">
3    <PencilSquareIcon />
4    Primary
5  </button>
6  <button className="btn secondary">
7    <TrashIcon />
8    Secondary
9  </button>
10  <button className="btn">
11    <ArrowDownTrayIcon />
12    Tertiary
13  </button>
14  <button className="btn danger">
15    <TrashIcon />
16    Danger
17  </button>
18  <button className="btn ghost">
19    <ChevronLeftIcon />
20    Ghost
21  </button>
22</div>

Icon button links

PrimarySecondaryTertiaryDangerGhost
1<div className="space-x-3">
2  <a href="#" className="btn primary">
3    <PencilSquareIcon />
4    Primary
5  </a>
6  <a href="#" className="btn secondary">
7    <TrashIcon />
8    Secondary
9  </a>
10  <a href="#" className="btn">
11    <ArrowDownTrayIcon />
12    Tertiary
13  </a>
14  <a href="#" className="btn danger">
15    <TrashIcon />
16    Danger
17  </a>
18  <a href="#" className="btn ghost">
19    <ChevronLeftIcon />
20    Ghost
21  </a>
22</div>

Button group

1<div className="space-x-3">
2  <a href="#" className="btn primary">Primary</a>
3  <a href="#" className="btn secondary">Secondary</a>
4  <a href="#" className="btn">Tertiary (default)</a>
5  <a href="#" className="btn danger">Danger</a>
6  <a href="#" className="btn ghost">Ghost</a>
7</div>