Notice
Kitchen sink: every documented feature in one component — text, number, boolean, and union props; events; plain and parameterized snippets; methods; exported state; and annotated CSS custom properties.
The dismiss button has no accessible name when `title` is empty.
`count` past 99 widens the title row — see the Repeated example.
Re-renders every child on a `tone` change, snippets included.
One Notice per region; a stack of them reads as noise.
The kitchen sink — this page exists to exercise every documented feature at once, not to model a real component doc.
Also the corpus the language-server and formatter tests run against.
Name
Details
Default
Control
title*
Default —
Control
Heading of the notice
tone
Default info
Control
Visual tone of the dot next to the title
dismissible
Default true
Control
Show the dismiss button
count
Default 1
Control
Badge with the number of occurrences
action
Default —
Control
—
Optional action button rendered under the body
Name
Details
Default
Control
--notice-accent
Default hsl(221 83% 53%)
Control
Accent border and title color (default: hsl(221 83% 53%))
--notice-bg
Default hsl(240 5% 97%)
Control
Background color (default: hsl(240 5% 97%))
--notice-pad
Default 14px
Control
Inner padding
--notice-radius
Default 10px
Control
Corner radius
Name
Details
ondismiss
Called when the notice is dismissed
onshow
Called when the notice is shown again, with the total show count
Name
Details
icon
Leading icon; receives the current tone
children
Body content
Name
Details
Control
dismiss
Control
Hide the notice
show
Control
Show the notice again
Name
Details
Current value
stats
Current value —
Live counters: how often the notice was shown and dismissed