Layer · Core
BetaCore.
Small primitives. Reused often, stable, simple.
bau-button ships first — icon, text, badge, avatar
and divider follow as the next foundation round.
bau-button
The action primitive. Variants for hierarchy, touch-optimized,
form-capable. Native <button> internally, slot for label.
variants
primary · accent · secondary · ghost
states
default · disabled
type
submit · button · reset
API
| Attribute | Type | Default | Description |
|---|---|---|---|
variant |
'primary' | 'secondary' | 'ghost' | 'accent' | 'primary' | Visual hierarchy of the action. |
disabled |
boolean | false | Blocks interaction, dims to 45 % opacity. |
type |
'button' | 'submit' | 'reset' | 'button' | Native form behavior of the inner <button>. |
slots & parts
| Slot / Part | Type | Description |
|---|---|---|
(default) |
Slot | Button label. |
::part(button) |
CSS Part | Inner <button> — direct style access. |
css custom properties
| Property | Default | Effect |
|---|---|---|
--bau-button-bg |
var(--bau-color-fg) | Background color. |
--bau-button-fg |
var(--bau-color-bg-raised) | Text color. |
--bau-button-radius |
var(--bau-control-radius) | Border radius. |
--bau-button-height |
var(--bau-control-height-md) | Height — override for sm/lg variant. |
--bau-button-padding-x |
var(--bau-control-padding-x) | Horizontal padding. |
Roadmap
Planned for Core: bau-icon, bau-text,
bau-heading, bau-badge,
bau-avatar, bau-divider,
bau-spinner.