Feedback

Toast Item

semantic HTML

toast stack 안의 개별 알림입니다.

stablefreeSince 0.2

Live example

Notifications appear here after an action.

<button type="button" data-example-action="show-toast">Show toast</button><section data-standard-component="toast-stack" class="standard-toast-stack" aria-live="polite"><article role="status">Notifications appear here after an action.</article></section>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.2`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

tone에 따라 status 또는 alert 역할을 사용하고 항상 이름이 있는 닫기 버튼을 제공합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->