Styling contract
Headless toast exposes a deliberately small styling surface: one slot on the viewport, one slot on each item, plus tone and state attributes. Everything else is your markup.
Slot and state hooks
Style the stack with [data-slot="toast-viewport"] and each item with [data-slot="toast-item"]. Branch by data-tone and data-state when you want semantic variants.
Slot and state selectors
css
[data-slot="toast-viewport"] {
display: grid;
gap: 0.65rem;
}
[data-slot="toast-item"][data-tone="success"] {
border-color: var(--tng-semantic-accent-success);
}
[data-slot="toast-item"][data-tone="danger"] {
border-color: var(--tng-semantic-accent-danger);
}
[data-slot="toast-item"][data-state="closed"],
[data-slot="toast-item"][hidden] {
display: none !important;
}
CSS starter
A simple owner-authored baseline usually means one positioned stack rule and one surface rule for each item.
Starter toast CSS
css
.release-toast-stack {
display: grid;
gap: 0.65rem;
position: fixed;
right: 1rem;
top: 1rem;
width: min(24rem, calc(100vw - 2rem));
}
.release-toast-card {
background: var(--tng-semantic-background-surface);
border: 1px solid var(--tng-semantic-border-default);
border-radius: 0.85rem;
box-shadow: 0 16px 30px color-mix(in srgb, var(--tng-semantic-foreground-primary) 18%, transparent);
color: var(--tng-semantic-foreground-primary);
display: grid;
gap: 0.35rem;
padding: 0.8rem 0.85rem;
}
.release-toast-card strong {
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.release-toast-card p {
color: var(--tng-semantic-foreground-secondary);
line-height: 1.45;
margin: 0;
}
Owner guidance
- Keep tone emphasis on the outer item surface so screen-reader semantics and visual semantics stay aligned.
- Hide closed items with a
[hidden]override if you choose to keep them mounted during exit animations. - Add your own close buttons and action controls inside the item markup as needed.
- Use the wrapper or ownable install when you want a built-in shell instead of styling everything from scratch.