<baht-button>

Design-system button. Variants + sizes via attributes; content via children or label.

Variants

Primary

Secondary

Ghost

Danger

<baht-button variant="primary">Primary</baht-button>
<baht-button variant="secondary">Secondary</baht-button>
<baht-button variant="ghost">Ghost</baht-button>
<baht-button variant="danger">Danger</baht-button>

Sizes

Small

Medium

Large

<baht-button size="sm">Small</baht-button>
<baht-button size="md">Medium</baht-button>
<baht-button size="lg">Large</baht-button>

With icon

Copy

Export

Import

Add field

Curated icon set: copy, check, download, upload, plus, external, close, play. Icons inherit the button color.

<baht-button icon="copy" variant="secondary">Copy</baht-button>
<baht-button icon="download">Export</baht-button>
<baht-button icon="upload" variant="ghost">Import</baht-button>
<baht-button icon="plus">Add field</baht-button>

Icon-only (needs label for a11y)

label becomes the aria-label. Required, since there is no visible text.

<baht-button icon="close" icon-only="true" label="Close" variant="ghost"></baht-button>
<baht-button icon="copy" icon-only="true" label="Copy" variant="secondary"></baht-button>
<baht-button icon="plus" icon-only="true" label="Add"></baht-button>

Disabled

Can’t touch this

<baht-button disabled="true">Can’t touch this</baht-button>

Host aria-label (glyph content, not icon-only)

‹

›

The accessible name must sit on the element that carries the button role; aria-label on the role-less host is ignored, so the component forwards it, taking priority over icon-only's label. Use it whenever the visible content (a glyph, a symbol) is not itself the accessible name.

<baht-button aria-label="Previous month">‹</baht-button>
<baht-button aria-label="Next month">›</baht-button>

Keyboard shortcut

Shortcut tooltip

Close window

Submit

Hover or focus for the tooltip. The combo is bound page-wide: press ⌥Q / Alt+Q and the button clicks. Shown as ⌥Q on Mac, Alt+Q elsewhere; announced with aria-keyshortcuts.

<baht-button variant="secondary" shortcut="alt+q">Close window</baht-button>
<baht-button shortcut="mod+enter" icon="check">Submit</baht-button>

Spec: modifiers ctrl alt/option shift meta/cmd and mod (⌘ on Mac, Ctrl elsewhere), plus one key: a letter, digit, punctuation, enter, escape, space, arrows, f1–f12… Letters match by physical key, so ⌥Q on a Mac and a Thai layout still hit alt+q.

A press clicks at most one button, the first in document order that is:

not disabled;
inside the topmost open <baht-modal> when one is open (buttons behind it, and in closed modals, stay quiet);
not under [hidden] / [inert].

Modifier-less shortcuts (n, /) do not fire while typing in a field; ones with ⌃/⌥/⌘ do. Auto-repeat, IME composition and keys something else already handled (preventDefault) are ignored. Avoid combos the browser or OS owns (⌘W, ⌘Q, Ctrl+T…): the page never sees them.

The same helpers are exported for app code: parseShortcut, formatShortcut, matchShortcut, ariaKeyshortcuts from bank20baht-ui/engine.

In tests, locate these buttons with getByRole('button', { name }), not getByLabel (the attribute is present on both the host and the inner button).

Props

Name	Type	Default	Description
`variant`	`ButtonVariant`	`'primary'`	Visual style (primary \| secondary \| ghost \| danger)
`size`	`ButtonSize`	`'md'`	Button size (sm \| md \| lg)
`disabled`	`boolean`	`false`	Disable
`type`	`'button' \| 'submit'`	`'button'`	Native button type (button \| submit)
`label`	`string`	`''`	Text alternative to children / a11y name for icon-only
`icon`	`IconName \| ''`	`''`	Optional leading icon (copy \| check \| download \| upload \| plus \| external \| close \| play)
`icon-only`	`boolean`	`false`	Square icon button; set label for the accessible name
`aria-label`	`string`	`''`	The accessible name must sit on the element that carries the button role; aria-label on the role-less host is ignored, so the component forwards it to the inner button's aria-label, winning over the icon-only + label fallback. Set it whenever the visible content is not itself the accessible name
`shortcut`	`string`	`''`	Key combo that clicks the button page-wide (alt+q, mod+enter); shown in a tooltip + aria-keyshortcuts
`tooltip-position`	`'top' \| 'bottom'`	`'bottom'`	Shortcut tooltip placement (bottom \| top)

Events

Event	detail	Description
`name`	CustomEvent
`click`	`MouseEvent`	Native click

Slots

Slot	Description
`(default)`	Button content