Notification

id
(required only for Web)

string

title (required)

ReactNode

dismissible

boolean

variant

'info' | 'warning' | 'error' | 'success'

'info'

onDismiss
Callback after a notification has been dismissed

() => void

ariaLive

'assertive' | 'polite'

'polite'

...
Spread to outer most div - the 'focus wrapper'

JSX.IntrinsicElements["div"]
Omit<DivProps, 'title'>

Text and border colour - Info, success, warning, error

color.alert.info color.alert.success color.alert.warning color.alert.error

Heading background colour - Info, success, warning, error

color.alert.infotint color.alert.successtint color.alert.warningtint color.alert.errortint

Additional text colour

color.surface.onsurface

Additional text background colour

color.surface.bright

Dismiss icon colour

color.button.surface.fg

Dismiss button colour

color.button.surface.bg

Heading text font weight

font.family.bold

Text font weight

font.family.book

Text line height

font.lineheight.md

Border width

border.width.sm

Border radius

border.radius.lg

Padding

space-200 space-300 space-400