Button themes

The theme input controls which visual design system the button uses. expressive and enhanced variants are tg2 only. tag and linkStyle are tg only.

Dark mode has not been reviewed by design. It is a work in progress. Do not use.

tg2-light

tg2-dark Beta

tg-light

tg-dark Beta

Setting up dark mode in your app

There are two ways to apply dark mode. Both rely on CSS custom property inheritance — no SCSS recompile is needed.

Option 1 — per button

Pass [theme] directly on each button. Use this when only specific buttons in a page need dark mode.

<button tg2Button [theme]="'tg2-dark'">Button</button>

Option 2 — whole page or container

Set data-tg-theme="tg2-dark" on <html> or any ancestor element. All tg2Button inside will use dark tokens automatically — no [theme] input required on each button.

// Toggle dark mode on the whole page
document.documentElement.setAttribute('data-tg-theme', 'tg2-dark');

// Reset to light mode
document.documentElement.removeAttribute('data-tg-theme');

// Or scope to a container element
containerElement.setAttribute('data-tg-theme', 'tg2-dark');