A banner displays an important, succinct message, and provides action for users to address.
It draws the attention to the message by displaying it at the top in various colors.
status: Â Â Â Â | "positive" Â Â Â Â | "negative" Â Â Â Â | "default" Â Â Â Â | "warning" = "default"
Type of banner.
Optionaltext
text?:string
Text displayed on the banner.
Can also be slotted with default (unnamed) slot.
If both are present, text prop will be displayed and slot will not
Optionaltrailing
trailing?:Node[]
Staticstyles
styles:CSSResultGroup[] = ...
rendering
Protectedrender
render(): TemplateResult<1>
Invoked on each update to perform rendering tasks. This method may return
any value renderable by lit-html's ChildPart - typically a
TemplateResult. Setting properties inside this method will not trigger
the element to update.
A banner displays an important, succinct message, and provides action for users to address. It draws the attention to the message by displaying it at the top in various colors.
Slot
Slot
leadingIcon - Icon at leading side of text.
Slot
trailingIcon - Icon at trailing end of component.
Figma
https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=22195-43965
Storybook
https://zeta-ds.web.app/web/storybook/?path=/docs/banner--docs