Button

Buttons trigger actions. In Nuxt / PLAI use UButton — not the ci-button markup below.

Each live example is labelled CI (Corporate Identity export from @anwalt.de/ci-tokens) or Nuxt UI (framework neutral / component defaults).

Live examples

Variants

Save changes Primary CI

Cancel Outline Nuxt UI

Learn more Ghost Nuxt UI

Filter Soft Nuxt UI

Promotional action Accent CI

Primary and accent use exported brand colours (--ci-color-brand-blue, --ci-color-brand-orange). Outline, ghost, and soft use Nuxt UI zinc neutrals for borders and surfaces.

Sizes

Small Default Large

Sizes follow Nuxt UI / Tailwind spacing — only the slate fill is CI.

Disabled

Processing…

HTML

Use <button type="button"> for actions. Use <a class="ci-button"> only when navigation is the primary intent (same URL as a link).

<button type="button" class="ci-button ci-button--primary">Save changes</button>
<button type="button" class="ci-button ci-button--outline">Cancel</button>
<button type="button" class="ci-button ci-button--primary" disabled>Processing…</button>

Accessibility

• Always set type="button" unless submitting a form (type="submit").
• Label with visible text — do not rely on colour alone.
• :focus-visible uses link blue outline (--ci-color-text-link, CI).
• Use disabled or aria-disabled="true" for inactive buttons; prefer disabled when the control is not focusable.

When to use

Variant	Use	Source
ci-button--primary	Main CTA (save, confirm, subscribe) — slate	CI --ci-color-brand-blue
ci-button--brand	Alias of --primary (same slate tokens)	CI
ci-button--outline	Secondary actions in modals and forms	Nuxt UI zinc border/surface
ci-button--ghost	Tertiary / inline actions	Nuxt UI
ci-button--soft	Low-emphasis toolbar or filter chips	Nuxt UI
ci-button--accent	Optional orange highlight — marketing, not default	CI --ci-color-brand-orange

In PLAI

<UButton color="primary" variant="solid">Save changes</UButton>
<UButton color="primary" variant="outline">Cancel</UButton>
<UButton color="accent" variant="solid">Promotional action</UButton>

color="primary" maps to customized slate where slate-500 = --ci-color-brand-blue.