components button

components/button

Import: import { Button, ButtonGroup } from "@tundralibs/ui/button"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Button

Button(props: ButtonProps): Html

ButtonGroup

ButtonGroup(props: { buttons: Html[]; attrs?: Attrs }): Html

Buttons fused into one segmented control (e.g. "Export" + a caret).

Types

ButtonVariant

• "primary"
• "secondary"
• "outline"
• "subtle"
• "ghost"
• "accent"
• "danger"

ButtonSize

• "sm"
• "md"
• "lg"

ButtonProps

Prop	Type	Required	Description
id	string
label	`string	Html`
iconStart	Html
iconEnd	Html
iconOnly	boolean		No visible label — pass an accessible name via attrs["aria-label"].
variant	ButtonVariant
size	ButtonSize
type	`"button"	"submit"	"reset"`
href	string
disabled	boolean
loading	boolean
block	boolean
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

The primary action

Button({ label: "Save changes", type: "submit" })

<button type="submit" class="btn">Save changes</button>

An icon button with an accessible name

Button({
  iconOnly: true,
  variant: "ghost",
  iconStart: Icon("x", { size: 16 }),
  attrs: { "aria-label": "Close" },
})

<button type="button" class="btn btn--ghost btn--icon" aria-label="Close">
  <svg width="16" height="16" width="2" …>…</svg>
</button>

A split button

ButtonGroup({
  buttons: [
    Button({ label: "Export", variant: "outline" }),
    Dropdown({
      id: "export-more",
      align: "end",
      trigger: html`${Icon("chevronDown", { size: 14 })}<span class="sr-only">More export options</span>`,
      triggerClass: "btn btn--outline btn--icon",
      content: Menu({ items: [{ label: "CSV", href: "/export.csv" }, { label: "PDF", href: "/export.pdf" }] }),
    }),
  ],
})

<span class="btn-group">
  <button type="button" class="btn btn--outline">Export</button>
  <div class="dropdown" id="export-more">
    <button type="button" class="dropdown__trigger btn btn--outline btn--icon" data-toggle="#export-more-panel" aria-expanded="false" aria-controls="export-more-panel">
      <svg width="14" height="14" width="2" …>…</svg>
      <span class="sr-only">More export options</span>
    </button>
    <div class="dropdown__panel dropdown__panel--end" id="export-more-panel" data-toggle-panel hidden>
      <ul class="menu__list">
        <li>
          <a class="menu__link" href="/export.csv">
            <span class="menu__link-label">CSV</span>
          </a>
        </li>
        <li>
          <a class="menu__link" href="/export.pdf">
            <span class="menu__link-label">PDF</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</span>

CSS hooks

Classes defined by components/button/button.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.btn, .btn--accent, .btn--block, .btn--danger, .btn--ghost, .btn--icon, .btn--lg, .btn--loading, .btn--outline, .btn--secondary, .btn--sm, .btn--subtle, .btn-group, .dropdown