Brand
Changelog v1.4

Brand Button

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

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

Loading Disabled Destructive disabled

Form types

Button Submit Reset

Variant mapping

Brand variant Shoelace variant
primaryprimary
secondaryneutral (restyled to --brandOS-primary-750)
naturalneutral (pure Shoelace neutral gray)
ghosttext
linktext (restyled with underline + --brandOS-primary-500)
destructivedanger

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.