Component primitive

Brand Button

<brand-button> wraps Web Awesome's <wa-button> with a brand variant API. Consumers use Snyder vocabulary (primary, secondary, ghost,destructive); the component maps those to the correct Web Awesome variant internally.

<brand-button>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-button>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Variants

Primary

Secondary

Natural

Ghost

Link

Destructive

Soft

Pale tinted background, coloured text, quieter than solid variants.

Primary

Secondary

Destructive

Outline

Primary

Secondary

Natural

Destructive

Sizes

Small

Medium

Large

Pill

Primary

Secondary

Natural

Destructive

Circle

Circular hit-area, ideal for icon-only buttons.

With icons

Settings

Save

Download

Delete

Button group

Left

Center

Right

States

Disabled

Destructive disabled

Form types

Button

Submit

Reset

Variant mapping

Brand variant	Web Awesome variant
`primary`	`primary`
`secondary`	`neutral` (restyled to `--brandOS-primary-750`)
`natural`	`neutral` (pure Web Awesome neutral gray)
`ghost`	`text`
`link`	`text` (restyled with underline + `--brandOS-primary-500`)
`destructive`	`danger`

Usage

import { BrandButton } from '@brandos/ui';

<brand-button variant="primary">Save</brand-button>
<brand-button variant="destructive" disabled>Delete</brand-button>

Behaviour notes

Unknown variant values fall back to primary, a typo never renders a broken button.
Styling uses --brandOS-* tokens only; no hex literals.
Theme switching is driven by data-theme on the root element.