Components

Primary Secondary Outline Soft Ghost Link Danger

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-soft">Soft</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-link">Link</button>
<button class="btn btn-danger">Danger</button>

Small Default Large Rounded LMR

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-rounded">Rounded</button>
<span class="btn-group"><button class="btn btn-secondary">L</button><button class="btn btn-secondary">M</button><button class="btn btn-secondary">R</button></span>

Header

Title

Body copy goes here.

Footer

<article class="card" style="max-inline-size:340px">
  <div class="card-header">Header</div>
  <div class="card-body"><h3 class="card-title">Title</h3><p class="card-text">Body copy goes here.</p></div>
  <div class="card-footer">Footer</div>
</article>

default primary success warning danger pill solid

<span class="badge">default</span>
<span class="badge badge-primary">primary</span>
<span class="badge badge-success">success</span>
<span class="badge badge-warning">warning</span>
<span class="badge badge-danger">danger</span>
<span class="badge badge-pill badge-info">pill</span>
<span class="badge badge-solid">solid</span>

<div class="alert alert-info"><div><div class="alert-title">Info</div>Something to note.</div></div>

Email We never share it. Enter a valid email.

Role EngineerDesigner

I agree

Notify me

<div class="field">
  <label class="label" for="e">Email</label>
  <input class="input" id="e" type="email" required>
  <span class="help">We never share it.</span>
  <span class="error-text">Enter a valid email.</span>
</div>
<label class="switch"><span>Notify me</span><input type="checkbox"><span class="track"></span></label>

AR LG ABC

<span class="avatar">AR</span>
<span class="avatar avatar-lg">LG</span>
<span class="avatar-group"><span class="avatar avatar-sm">A</span><span class="avatar avatar-sm">B</span><span class="avatar avatar-sm">C</span></span>
<div class="progress" style="inline-size:160px"><div class="bar" style="inline-size:60%"></div></div>
<span class="spinner"></span

Tabs

<div style="inline-size:100%">
  <div class="tabs" role="tablist">
    <button role="tab" aria-selected="true" aria-controls="dx1">One</button>
    <button role="tab" aria-selected="false" aria-controls="dx2">Two</button>
  </div>
  <div class="tab-panel" id="dx1" role="tabpanel">First panel.</div>
  <div class="tab-panel" id="dx2" role="tabpanel" hidden>Second panel.</div>
</div>

Accordion

<div class="accordion" style="inline-size:100%">
  <details open><summary>What is it?</summary><div class="accordion-body">A token-first framework.</div></details>
  <details><summary>Build step?</summary><div class="accordion-body">None required.</div></details>
</div>

Dropdown

<div class="dropdown">
  <button class="btn btn-soft" data-dropdown-toggle aria-expanded="false">Menu ▾</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Profile</a>
    <a class="dropdown-item" href="#">Settings</a>
    <div class="dropdown-divider"></div>
    <button class="dropdown-item">Sign out</button>
  </div>
</div>

Modal

<button class="btn btn-primary" data-modal-open="dlgDocs">Open modal</button>
<dialog class="modal" id="dlgDocs">
  <div class="modal-card">
    <div class="modal-header">Title <button class="btn btn-ghost btn-icon btn-sm" data-modal-close>✕</button></div>
    <div class="modal-body"><p class="mb-0">Native &lt;dialog&gt; — Esc, backdrop click and focus trapping included.</p></div>
    <div class="modal-footer"><button class="btn btn-ghost" data-modal-close>Cancel</button><button class="btn btn-primary" data-modal-close>OK</button></div>
  </div>
</dialog>

Toast

Lombok.toast("Saved", { variant: "success" });

Popover

<div class="popover">
  <button class="btn btn-outline" data-popover-toggle aria-expanded="false">Show ▾</button>
  <div class="popover-panel"><div class="popover-title">Popover</div><p class="card-text mb-0">Click-triggered, holds any content.</p></div>
</div>

Tooltip

<button class="btn btn-soft" data-tip="I am a tooltip">Hover me</button>

Breadcrumb & Pagination

<nav><ul class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">Docs</a></li><li aria-current="page">Components</li></ul></nav>

<ul class="pagination"><li><a href="#">‹</a></li><li class="is-active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">›</a></li></ul>

List group

<div class="list-group" style="inline-size:100%;max-inline-size:320px">
  <a class="list-group-item is-active" href="#">Inbox</a>
  <a class="list-group-item" href="#">Starred</a>
  <a class="list-group-item" href="#">Archive</a>
</div>

Table (sortable)

Click a header to sort.

<div class="table-wrap" style="inline-size:100%">
  <table class="table table-hover">
    <thead><tr><th aria-sort="none">Name</th><th aria-sort="none">Plan</th><th aria-sort="none">MRR</th></tr></thead>
    <tbody>
      <tr><td>Nadia</td><td>Pro</td><td>49</td></tr>
      <tr><td>Bayu</td><td>Team</td><td>199</td></tr>
      <tr><td>Citra</td><td>Free</td><td>0</td></tr>
    </tbody>
  </table>
</div>

Sidebar

<nav class="sidebar" style="border-radius:10px">
  <div class="sidebar-title">Workspace</div>
  <a class="sidebar-link is-active" href="#">Dashboard</a>
  <a class="sidebar-link" href="#">Projects</a>
  <a class="sidebar-link" href="#">Team</a>
</nav>

Drawer / Offcanvas

<button class="btn btn-primary" data-drawer-open="dDocs">Open drawer</button>
<aside class="drawer" id="dDocs">
  <div class="drawer-header">Menu <button class="btn btn-ghost btn-icon btn-sm" data-drawer-close>✕</button></div>
  <div class="drawer-body">Drawer content. Esc or click outside to close.</div>
</aside>
<div class="drawer-overlay" id="dDocs-overlay"></div>

Carousel

<div class="carousel" style="inline-size:100%">
  <button class="carousel-btn carousel-prev" aria-label="Previous">‹</button>
  <button class="carousel-btn carousel-next" aria-label="Next">›</button>
  <div class="carousel-track">
    <div class="carousel-slide is-third card"><div class="card-body">Slide 1</div></div>
    <div class="carousel-slide is-third card"><div class="card-body">Slide 2</div></div>
    <div class="carousel-slide is-third card"><div class="card-body">Slide 3</div></div>
    <div class="carousel-slide is-third card"><div class="card-body">Slide 4</div></div>
  </div>
  <div class="carousel-dots"><button class="is-active"></button><button></button><button></button><button></button></div>
</div>

Timeline & Steps

<ul class="timeline" style="inline-size:100%;max-inline-size:420px">
  <li><div class="timeline-time">09:00</div><div class="timeline-title">Started</div><p class="card-text mb-0">Kickoff.</p></li>
  <li><div class="timeline-time">14:00</div><div class="timeline-title">Shipped</div><p class="card-text mb-0">Done.</p></li>
</ul>

<ul class="steps" style="inline-size:100%;max-inline-size:360px"><li class="is-done">Account</li><li class="is-active">Profile</li><li>Done</li></ul>