Usage
Banner informs users about important changes or conditions in the interface. Reach for it when you need to communicate something prominent that applies to the current page or area. The variant attribute sets the tone, and an icon matching the variant is shown automatically.
import "@nordhealth/components/lib/Banner"
Examples
Variants
The variant attribute sets the tone of the banner. Each variant shows a matching icon.
Default
When no variant is set, the banner uses the info style.
Inside a card
A banner can be placed inside a card to draw attention to content within it.
With actions New since Jul 6, 2026
Use the actions slot to place a call-to-action and/or dismiss button at the trailing end of the banner. Keep actions to a clearly worded link or button so users can respond directly.
Next to a button
A banner sits well alongside a button to flag a related condition before the user acts.
With a form
Use a banner within a form to surface validation context or important conditions before submission.
RTL
Banners follow the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Banner uses
role="alert", so screen readers announce its content when it appears. Use it for genuinely important, timely information rather than decorative messaging. - Keep the message concise and put any action behind a clearly worded link so its purpose is obvious out of context.
- The variant icon is presentational; make sure the message text alone communicates the meaning, since the icon isn't announced.
API reference
Banner
Banner informs users about important changes or conditions in the interface. Use this component if you need to communicate to users in a prominent way.
<nord-accordion></nord-accordion>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
variant | variant | The style variant of the banner. | 'info' | 'danger' | 'success' | 'warning' | 'info' |
Slots
| Slot name | Description |
|---|---|
Default slot | default slot |
actions | Optional slot for action buttons (a call to action and/or a dismiss button), shown at the trailing end of the banner. |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-banner-border-radius | Controls how rounded the corners are, using border radius tokens. | var(--n-border-radius) |
--n-banner-box-shadow | Controls the surrounding shadow, using box shadow tokens. | var(--n-box-shadow-card) |
Dependencies
This component is internally dependent on the following components:
- <nord-icon>
Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.
- <nord-stack>
Stack
Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing between each child.
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use this component if you need to communicate in a prominent way.
- Place banner at the top of the section it applies to.
- Use for highlighting errors and success statuses.
- Put banner close to the context it’s referring to.
- Move focus to the banner if it’s relevant to the current workflow.
Don’t
- Move focus to banner if it appears on page load.
- Use for highlighting general content or as a banner.
- Use to replace an error page.
Content guidelines
Banner content should be clear, accurate and easy to understand:
When writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Always end in punctuation: