Banners are prominent messaging components used to communicate important information, alerts, or announcements to users at the page or section level. They provide aighly visible way to deliver critical messages, system status updates, or contextual information that requires immediate attention.
✅ Use banners when:
- Displaying system-wide announcements or alerts
- Communicating important status changes or updates
- Showing temporary notifications that affect the entire interface
- Providing feedback after user actions (success, warnings, errors)
- Announcing new features, promotions, or important information
- Displaying maintenance or service disruption notices
❌ Don't use banners for:
- Minor notifications (use toast notifications instead)
- Persistent UI elements (use dedicated sections)
- Form validation messages (use field-level feedback)
- Marketing content that isn't critical (use cards or sections)
- Information that doesn't require immediate attention
The default banner uses the brand variant and includes an information icon:
Different variants communicate different types of messages and urgency levels:
Allow users to dismiss banners by adding the closeable attribute. Listen to the dds-close event toandle the dismissal:
####andling close events
document.querySelector('dap-ds-banner').addEventListener('dds-close', (event) => {
//ide the banner
event.target.opened = 'false';
// Optional: Store dismissal state
localStorage.setItem('banner-dismissed', 'true');
console.log('Banner closed by user');
});
Add interactive elements to banners using the actions slot. Actionselp users take immediate steps related to the banner message:
Customize banner icons using the icon attribute or the icon slot for more complex scenarios:
Banners automatically include appropriate ARIA attributes and semantic roles:
- Role: Banners use
alertrole for important messages - Live regions: Dynamic content changes are announced to screen readers
- Keyboard navigation: Close buttons are fully keyboard accessible
- Color contrast: All variants meet WCAG AA contrast requirements
Banners are typically positioned at the top of pages or sections:
.page-banner {
position: sticky;
top: 0;
z-index: 100;
margin-bottom: var(--dds-spacing-400);
}
- Use persistent banners for critical system information
- Make promotional or informational banners dismissible
- Consider using session storage to remember dismissal state
- Use primary buttons for the most important action
- Limit to 2-3 actions maximum to avoid overwhelming users
- Ensure action text is clear and specific to the banner context
The banner component supports extensive customization beyond the default variants. This section demonstrates practical styling techniques and advanced customization patterns.
For simple customizations, use CSS custom properties directly on the component:
Experiment with custom banner styling using CSS parts and custom properties. The banner component exposes several CSS parts for advanced styling: base, card-base, icon, icon-element, icon-base, closebutton, close-icon-element, close-icon-base, actions, and title. Try the presets below or create your own styles:
Custom Styled Banner: Experiment with different styling presets to see how CSS parts can customize the banner appearance.
import { DapDSBanner } from 'dap-design-system'
import { DapDSBannerReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSBanner } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'brand', 'positive' , 'info' , 'warning' , 'negative' | 'brand' | The variant of the banner |
closeable | boolean | Whether the banner is closeable | |
opened | string | 'true' | State of the banner. If false banner is hidden |
closeButtonLabel | string | 'close' | The aria-label for the close button |
icon | string | The icon of the banner, this is a name of a built icon icon |
| Name | Description |
|---|---|
(default) | The content of the banner. |
actions | Actions of banner |
icon | The icon of the banner. |
| Event Name | Description | Type |
|---|---|---|
dds-close | Event fired when the banner is closed. | {void } |
| Part Name | Description |
|---|---|
base | The main banner container. |
card-base | The wrapper card container. |
icon | The icon of the banner. |
icon-element | The icon element of the banner. |
icon-base | The base of the icon. |
closebutton | The close button of the banner. |
close-icon-element | The icon element of the close button. |
close-icon-base | The base of the close button icon. |
actions | The actions of the banner. |
title | The title of the banner. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-banner::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-banner::part(base),
.my-custom-dap-ds-banner::part(card-base) {
/* Shared styles */
}
Example usage:
<dap-ds-banner class="my-custom-dap-ds-banner">
Banner
</dap-ds-banner>
.my-custom-dap-ds-banner::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-banner-gap | The gap between banner elements. Default is the design system's spacing-200. |
--dds-banner-line-height | The line height of the banner text. Default is the design system's font-line-height-xlarge. |
--dds-banner-transition | The transition property for the banner. Default is 'all 0.2s ease-in-out'. |
--dds-banner-brand-background | The background color of the brand banner. Default is the design system's banner-background-brand. |
--dds-banner-brand-icon-color | The color of the brand banner icon. Default is the design system's banner-icon-brand. |
--dds-banner-brand-text-color | The text color of the brand banner. Default is the design system's banner-text-brand. |
--dds-banner-brand-action-color | The color of the brand banner actions. Default is the design system's banner-action-enabled. |
--dds-banner-info-background | The background color of the info banner. Default is the design system's banner-background-informative. |
--dds-banner-info-icon-color | The color of the info banner icon. Default is the design system's banner-icon-informative. |
--dds-banner-info-text-color | The text color of the info banner. Default is the design system's banner-text-informative. |
--dds-banner-info-action-color | The color of the info banner actions. Default is the design system's banner-action-enabled. |
--dds-banner-positive-background | The background color of the positive banner. Default is the design system's banner-background-positive. |
--dds-banner-positive-icon-color | The color of the positive banner icon. Default is the design system's banner-icon-positive. |
--dds-banner-positive-text-color | The text color of the positive banner. Default is the design system's banner-text-positive. |
--dds-banner-positive-action-color | The color of the positive banner actions. Default is the design system's banner-action-enabled. |
--dds-banner-warning-background | The background color of the warning banner. Default is the design system's banner-background-warning. |
--dds-banner-warning-icon-color | The color of the warning banner icon. Default is the design system's banner-icon-warning. |
--dds-banner-warning-text-color | The text color of the warning banner. Default is the design system's banner-text-warning. |
--dds-banner-warning-action-color | The color of the warning banner actions. Default is the design system's banner-action-inverted-enabled. |
--dds-banner-negative-background | The background color of the negative banner. Default is the design system's banner-background-negative. |
--dds-banner-negative-icon-color | The color of the negative banner icon. Default is the design system's banner-icon-negative. |
--dds-banner-negative-text-color | The text color of the negative banner. Default is the design system's banner-text-negative. |
--dds-banner-negative-action-color | The color of the negative banner actions. Default is the design system's banner-action-inverted-enabled. |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-banner
style="--dds-banner-gap: value; --dds-banner-line-height: value;">
Banner
</dap-ds-banner>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-banner {
--dds-banner-gap: value;
--dds-banner-line-height: value;
--dds-banner-transition: value;
}
<dap-ds-banner class="my-custom-dap-ds-banner">
Banner
</dap-ds-banner>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-banner {
--dds-banner-gap: value;
--dds-banner-line-height: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
