Button Component
Triggers actions and navigations. The primary button uses amber — the one primary action color. Use only one primary button per screen. Secondary, ghost, and danger variants serve supporting roles.
Variants
Primary — amber fill
Default
Hover
Focus
Active
Disabled
Loading
Secondary — amber outline
Default
Hover
Focus
Active
Disabled
Loading
Ghost — neutral outline
Default
Hover
Focus
Active
Disabled
Danger — coral fill · destructive actions only
Default
Hover
Focus
Active
Disabled
Loading
Sizes
Small · Medium · Large — all variants
sm · 28px
md · 36px
lg · 44px
sm ghost
md ghost
lg ghost
With icons
Leading icon · Trailing icon · Icon only
Leading icon
Trailing icon
Edit action
Icon only
Icon sm
Odoo-style action bar
Typical button group at the top of a record formRecord form action bar — Edit mode
Record form action bar — Confirmed record
State reference
| State | Trigger | Visual change | Markup |
|---|---|---|---|
| Default | — | Base appearance | <button> |
| Hover | Mouse over | Background darkens by ~10% | CSS :hover |
| Focus | Keyboard tab / click | 3px amber focus ring via box-shadow | CSS :focus-visible |
| Active | Mouse / finger down | Scale 0.98, background darkens further | CSS :active |
| Disabled | disabled attr | 40% opacity, cursor: not-allowed | disabled |
| Loading | Async action starts | Spinner replaces leading icon, label updates to "…ing" | aria-busy="true" |