Styling contract
The supported component contract is host-level token overrides on tng-switch plus any wrapper layout you apply around it. If you need to style the internal track or thumb markup directly, switch to the headless or ownable surfaces instead.
| Token | Typical use |
|---|---|
--tng-semantic-accent-brand | Checked track background. |
--tng-semantic-border-subtle | Unchecked track background. |
--tng-semantic-focus-ring | Focus-visible ring around the visible switch button. |
--tng-semantic-foreground-primary | Projected label text color. |
--tng-color-white | Thumb fill when you need a different neutral token. |
switch.tokens.css
css
tng-switch {
--tng-semantic-accent-brand: #2563eb;
--tng-semantic-border-subtle: #cbd5e1;
--tng-semantic-focus-ring: rgba(37, 99, 235, 0.25);
--tng-semantic-foreground-primary: var(--tng-semantic-foreground-primary);
}
Styling examples
The same switch component contract can sit inside a plain CSS shell or a Tailwind shell by overriding host-level semantic tokens.
Release gate (Plain-CSS)
Release gate
Require review
Release gate (Tailwind CSS)
Release gate
Require human sign-off before publish.
Require review