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:

<dap-ds-banner>
The new version of the application is now available for download!
</dap-ds-banner>

Different variants communicate different types of messages and urgency levels:

<dap-ds-stack>
<dap-ds-banner variant="brand">
  <strong>New Feature:</strong> Enhanced dashboard with real-time analytics is now available!
</dap-ds-banner>
<dap-ds-banner variant="info">
  <strong>System Update:</strong> Scheduled maintenance will occur tonight from 2:00 AM to 4:00 AM.
</dap-ds-banner>
<dap-ds-banner variant="positive">
  <strong>Success:</strong> Your accountas been successfully verified and activated.
</dap-ds-banner>
<dap-ds-banner variant="warning">
  <strong>Important:</strong> Your subscription expires in 7 days. Please renew to continue service.
</dap-ds-banner>
<dap-ds-banner variant="negative">
  <strong>Service Disruption:</strong> We are experiencing technical difficulties. Our team is working on a fix.
</dap-ds-banner>
</dap-ds-stack>

Allow users to dismiss banners by adding the closeable attribute. Listen to the dds-close event toandle the dismissal:

<dap-ds-stack>
<dap-ds-banner variant="info" closeable>
  <strong>Tip:</strong> You can now save your work automatically. This banner can be dismissed.
</dap-ds-banner>
<dap-ds-banner variant="warning" closeable>
  <strong>Reminder:</strong> Remember to backup your data regularly for safety.
</dap-ds-banner>
</dap-ds-stack>

####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:

<dap-ds-stack>
<dap-ds-banner variant="info">
  <strong>System Update Available:</strong> A new version with enhanced security features is ready to install.
  <dap-ds-button slot="actions" size="sm">Install Now</dap-ds-button>
  <dap-ds-link slot="actions">Learn More</dap-ds-link>
</dap-ds-banner>

<dap-ds-banner variant="warning">
  <strong>Storage Almost Full:</strong> You're using 85% of your available storage space.
  <dap-ds-button slot="actions"  size="sm">Upgrade Plan</dap-ds-button>
  <dap-ds-link slot="actions">Manage Files</dap-ds-link>
</dap-ds-banner>

<dap-ds-banner variant="positive" closeable>
  <strong>Backup Complete:</strong> Your dataas been successfully backed up to the cloud.
  <dap-ds-link slot="actions">View Details</dap-ds-link>
</dap-ds-banner>
</dap-ds-stack>

Customize banner icons using the icon attribute or the icon slot for more complex scenarios:

<dap-ds-stack>
<dap-ds-banner variant="info" icon="download-line">
  <strong>Download Ready:</strong> Your requested file is ready for download.
  <dap-ds-button slot="actions" size="sm">Download</dap-ds-button>
</dap-ds-banner>

<dap-ds-banner variant="warning" icon="shield-check-line">
  <strong>Security Alert:</strong> We detected unusual activity on your account.
  <dap-ds-link slot="actions">Review Activity</dap-ds-link>
</dap-ds-banner>

<dap-ds-banner variant="positive">
  <dap-ds-icon slot="icon" name="star-fill"></dap-ds-icon>
  <strong>Premium Upgrade:</strong> You've been upgraded to our premium plan!
  <dap-ds-link slot="actions">Explore Features</dap-ds-link>
</dap-ds-banner>
</dap-ds-stack>

<dap-ds-stack>
<dap-ds-banner variant="positive" icon="check-line">
  <strong>All Systems Operational:</strong> All services are running normally.
</dap-ds-banner>

<dap-ds-banner variant="warning" icon="alert-line">
  <strong>Degraded Performance:</strong> Some users may experience slower response times.
  <dap-ds-link slot="actions">Status Page</dap-ds-link>
</dap-ds-banner>

<dap-ds-banner variant="negative" icon="error-warning-line">
  <strong>Service Outage:</strong> Authentication service is currently unavailable.
  <dap-ds-button slot="actions" size="sm">Get Updates</dap-ds-button>
</dap-ds-banner>
</dap-ds-stack>

<dap-ds-stack>
<dap-ds-banner variant="brand" icon="star-fill" closeable>
  <strong>Limited Time Offer:</strong> Get 30% off your first year with our annual plan!
  <dap-ds-button slot="actions" size="sm">Claim Offer</dap-ds-button>
  <dap-ds-link slot="actions">Learn More</dap-ds-link>
</dap-ds-banner>

<dap-ds-banner variant="info" icon="lightbulb-fill" closeable>
  <strong>New Feature:</strong> Try our AI-powered analytics dashboard.
  <dap-ds-link slot="actions">Explore Now</dap-ds-link>
</dap-ds-banner>
</dap-ds-stack>

<dap-ds-banner variant="info" icon="cookie-line">
<strong>Cookie Notice:</strong> We use cookies to enhance your experience and analyze site usage.
<dap-ds-button slot="actions"  size="sm">Accept All</dap-ds-button>
<dap-ds-button slot="actions" variant="outline" size="sm">Customize</dap-ds-button>
<dap-ds-link slot="actions">Privacy Policy</dap-ds-link>
</dap-ds-banner>

Banners automatically include appropriate ARIA attributes and semantic roles:

• Role: Banners use alert role 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:

<dap-ds-banner 
variant="brand"
style="--dds-banner-brand-background: var(--dds-violet-200); --dds-banner-brand-text-color: var(--dds-violet-900); --dds-banner-brand-icon-color: var(--dds-violet-600)">
<strong>Custom Styled Banner:</strong> This banner uses custom colors via CSS properties.
</dap-ds-banner>

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:

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'

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 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;
}