Brand
Changelogv1.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

PrimarySecondaryNaturalGhostLinkDestructive

Soft

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

PrimarySecondaryDestructive

Outline

PrimarySecondaryNaturalDestructive

Sizes

SmallMediumLarge

Pill

PrimarySecondaryNaturalDestructive

Circle

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

With icons

SettingsSaveDownloadDelete

Button group

LeftCenterRight

States

LoadingDisabledDestructive disabled

Form types

ButtonSubmitReset

Variant mapping

Brand variantShoelace 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.