Buttons

<div class="flex wrap">
<button type="button" class="btn btn-primary" data-demo-action>Primary</button>
<button type="button" class="btn btn-secondary" data-demo-action>Secondary</button>
<button type="button" class="btn btn-outline" data-demo-action>Outline</button>
<button type="button" class="btn btn-soft" data-demo-action>Information</button>
<button type="button" class="btn btn-success" data-demo-action>Success</button>
<button type="button" class="btn btn-warning" data-demo-action>Warning</button>
<button type="button" class="btn btn-danger" data-demo-action>Danger</button>
</div>

<div class="flex wrap">
<button type="button" class="btn btn-primary btn-sm" data-demo-action>Small</button>
<button type="button" class="btn btn-primary" data-demo-action>Regular</button>
<button type="button" class="btn btn-primary btn-lg" data-demo-action>Large</button>
<button type="button" class="btn btn-outline btn-pill" data-demo-action>Rounded</button>
</div>

<div class="stack">
<div class="button-group" role="group" aria-label="Selected view">
<button type="button" class="btn btn-secondary" data-view-toggle aria-pressed="true">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="3" y="3" width="7" height="7" rx="2"/>
<rect x="14" y="3" width="7" height="7" rx="2"/>
<rect x="3" y="14" width="7" height="7" rx="2"/>
<rect x="14" y="14" width="7" height="7" rx="2"/>
</svg>Grid</button>
<button type="button" class="btn btn-secondary" data-view-toggle aria-pressed="false">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 6h16M4 12h16M4 18h16"/>
</svg>List</button>
</div>
<button type="button" class="btn btn-soft" data-bookmark aria-pressed="false">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v16m0-16C8 2 4 3 2 4v15c3-1 6-1 10 2 4-3 7-3 10-2V4c-3-1-6-2-10 1Z"/>
</svg>Bookmark</button>
<p class="small muted" data-view-status role="status">Selected view: Grid</p>
</div>

<div class="flex wrap">
<span class="tooltip-wrap">
<button class="icon-button" type="button" data-demo-action aria-label="Edit" aria-describedby="tip-edit">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m14 5 5 5m-15 5 11-11a3.5 3.5 0 0 1 5 5L9 20l-6 1 1-6Z"/>
</svg>
</button>
<span class="tooltip" role="tooltip" id="tip-edit">Edit</span>
</span>
<span class="tooltip-wrap">
<button class="icon-button" type="button" data-demo-action aria-label="Download" aria-describedby="tip-download">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 3v12m-5-5 5 5 5-5M4 16v5h16v-5"/>
</svg>
</button>
<span class="tooltip" role="tooltip" id="tip-download">Download</span>
</span>
<span class="tooltip-wrap">
<button class="icon-button" type="button" data-demo-action aria-label="Add" aria-describedby="tip-plus">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v14M5 12h14"/>
</svg>
</button>
<span class="tooltip" role="tooltip" id="tip-plus">Add</span>
</span>
<span class="tooltip-wrap">
<button class="icon-button" type="button" data-demo-action aria-label="Delete" aria-describedby="tip-trash">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7"/>
</svg>
</button>
<span class="tooltip" role="tooltip" id="tip-trash">Delete</span>
</span>
</div>

<details class="action-dropdown">
<summary class="btn btn-secondary">Actions<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m6 9 6 6 6-6"/>
</svg>
</summary>
<div class="dropdown-links">
<a href="pages/workspace/projects.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 8V6a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8Z"/>
</svg>Projects</a>
<a href="pages/commerce/customers.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="9" cy="8" r="3"/>
<path d="M3 21v-2a6 6 0 0 1 12 0v2M16 5a3 3 0 0 1 0 6m2 4a5 5 0 0 1 3 4v2"/>
</svg>Customers</a>
<a href="pages/system/settings.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m9 3-1 3-3 1-2 4 2 3v4l4 2 3-1 3 1 4-2v-4l2-3-2-4-3-1-1-3H9Z"/>
<circle cx="12" cy="12" r="3"/>
</svg>Settings</a>
</div>
</details>

<div class="flex wrap">
<button type="button" class="btn btn-primary" data-loading-demo>
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m13 2-9 12h7l-1 8 10-13h-7l0-7Z"/>
</svg>Try loading</button>
<button type="button" class="btn btn-secondary" disabled>Disabled</button>
</div>
<p class="small muted section-copy" role="status" data-loading-result>
</p>