Banner webcomponent - DÁP Szolgáltatások

Banner

Overview

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.

When to Use

✅ 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

Design system docs

Examples

Default banner

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>

Banner variants

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>

Closeable banners

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

Banners with actions

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>

Custom icons

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>

Real-World Patterns

System Status Banners

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

Promotional Banners

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

Cookie and Privacy Notices

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

Accessibility Features

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

Implementation Notes

Banner Positioning

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

Persistent vs Dismissible

Use persistent banners for critical system information
Make promotional or informational banners dismissible
Consider using session storage to remember dismissal state

Action Button Guidelines

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

Importing

import { DapDSBanner } from 'dap-design-system/dist/dds'

Importing React

import { DapDSBannerReact } from 'dap-design-system/dist/react'

Attributes

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

Slots

Name	Description
`(default)`	The content of the banner.
`actions`	Actions of banner
`icon`	The icon of the banner.

Events

Event Name	Description	Type
`dds-close`	Event fired when the banner is closed.	`{void }`

CSS Parts

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.

CSS Custom Properties

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.