Skip to content
Spiral
/
/
Give feedback
Banners
Banners are used to communicate high-visibility messages at the top of a page or section.
Filled
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
Show code
Light
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
Show code
Lighter
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
Show code
Dark
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
Show code
Stroke
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
This is a banner notification
Insert your descriptions here
Upgrade
Show code
API References
Prop
Type
Default
variant
"filled"
"light"
"lighter"
"dark"
"stroke"
"filled"
state
"error"
"warning"
"success"
"info"
"feature"
"info"
icon
ComponentType
—
showIcon
boolean
true
title
ReactNode
—
description
ReactNode
—
actionLabel
ReactNode
—
onAction
() => void
—
dismissible
boolean
false
onDismiss
() => void
—
role
"alert"
"status"
"none"
"alert" for error / warning, otherwise "status"
className
string
" "
