Callout webcomponent - DÁP Szolgáltatások

Callout

Overview

Callouts are attention-grabbing components designed to highlight important information, alerts, or messages to users. They serve as visual cues to draw attention to critical content that requires immediate notice or action. Callouts help create a clear information hierarchy and improve user experience by making important messages stand out from regular content.

When to Use

✅ Use callouts when:

Displaying system status messages (success, error, warning states)
Highlighting important announcements or updates
Showing validation feedback in forms
Providing contextual help or tips
Alerting users to temporary system maintenance or issues
Emphasizing key information that affects user workflow
Displaying promotional messages or feature highlights
Showing progress updates in multi-step processes

❌ Don't use callouts for:

Regular content that doesn't require special attention
Long-form text or detailed explanations (use cards or content sections instead)
Navigation elements (use navigation components)
Content that appears frequently (may cause alert fatigue)
Decorative purposes without functional meaning
Replacing proper error handling in forms

Design system docs

Examples

Basic callout

A simple callout with a title and message content. The default variant is brand:

<dap-ds-callout title="Important Information">
Please review the updated terms and conditions before proceeding with your application.
</dap-ds-callout>

Semantic variants

Callouts use different variants to convey meaning and importance through color coding. Each variant includes an appropriate default icon:

<dap-ds-stack>
<dap-ds-callout variant="brand" title="Brand Announcement">
  New features have been added to improve your experience.
</dap-ds-callout>
<dap-ds-callout variant="info" title="Information">
  Your session will expire in 10 minutes. Save your work to avoid losing progress.
</dap-ds-callout>
<dap-ds-callout variant="positive" title="Success">
  Your document has been successfully uploaded and is being processed.
</dap-ds-callout>
<dap-ds-callout variant="warning" title="Warning">
  Some features may be unavailable during scheduled maintenance tonight.
</dap-ds-callout>
<dap-ds-callout variant="negative" title="Error">
  Unable to process your request. Please check your connection and try again.
</dap-ds-callout>
</dap-ds-stack>

Background intensity (shades)

Control the visual prominence of callouts using different background shades. Use subtle for less prominent messages and strong for high-priority alerts:

<dap-ds-stack>
<dap-ds-callout shade="subtle" title="Subtle notification">
  Optional feature update available - install when convenient.
</dap-ds-callout>
<dap-ds-callout shade="base" title="Standard notification">
  Your profile information has been updated successfully.
</dap-ds-callout>
<dap-ds-callout shade="medium" title="Important notification">
  New security features have been enabled for your account.
</dap-ds-callout>
<dap-ds-callout shade="strong" title="Critical notification">
  Immediate action required: verify your account to maintain access.
</dap-ds-callout>
</dap-ds-stack>

Layout alignment

Choose between horizontal and vertical layouts based on your content and space requirements. Horizontal alignment is more compact, while vertical alignment provides better readability for longer messages:

<dap-ds-stack>
<dap-ds-callout alignment="horizontal" title="Horizontal Layout">
  System maintenance scheduled for tonight from 11 PM to 2 AM.
</dap-ds-callout>
<dap-ds-callout alignment="vertical" title="Vertical Layout">
  Your application is being reviewed. You will receive an email notification once the review is complete. This process typically takes 3-5 business days.
</dap-ds-callout>
</dap-ds-stack>

With borders

Add visual separation and definition by enabling borders. Borders help distinguish callouts from surrounding content:

<dap-ds-stack>
<dap-ds-callout noBorder="true" title="Without Border" variant="info">
  This callout blends seamlessly with the content around it.
</dap-ds-callout>
<dap-ds-callout noBorder="false" title="With Border" variant="info">
  This callout has a clear boundary that separates it from other content.
</dap-ds-callout>
</dap-ds-stack>

Dismissible callouts

Make callouts dismissible by adding a close button. Users can press Escape key or click the close button. Handle the dds-close event to implement custom close behavior:

<dap-ds-stack>
<dap-ds-callout 
  closeable 
  title="Dismissible Notification" 
  variant="info">
  You can close this message by clicking the X button or pressing Escape.
</dap-ds-callout>
<dap-ds-callout 
  closeable 
  title="Custom Close Button" 
  variant="warning"
  closeButtonLabel="Dismiss warning">
  <dap-ds-button slot="close" variant="secondary" size="xs">
    Got it
  </dap-ds-button>
  This callout uses a custom close button in the close slot.
</dap-ds-callout>
</dap-ds-stack>

Handling close events

// Listen for the close event
document.querySelector('dap-ds-callout').addEventListener('dds-close', (event) => {
  // Hide the callout
  event.target.setAttribute('opened', 'false');
  
  // Optional: Remove from DOM after animation
  setTimeout(() => {
    event.target.remove();
  }, 300);
  
  console.log('Callout was dismissed');
});

Custom icons

Override the default variant icons with custom icons using the icon slot. This is useful for brand-specific messaging or specialized use cases:

<dap-ds-stack>
<dap-ds-callout title="Custom Cookie Notice" variant="info">
  <dap-ds-icon-cookie-line slot="icon"></dap-ds-icon-cookie-line>
  We use cookies to enhance your browsing experience and analyze site traffic.
</dap-ds-callout>
<dap-ds-callout title="Security Update" variant="warning">
  <dap-ds-icon-shield-check-line slot="icon"></dap-ds-icon-shield-check-line>
  A security update is available for your account. Please review and update your settings.
</dap-ds-callout>
<dap-ds-callout title="Download Complete" variant="positive">
  <dap-ds-icon-download-line slot="icon"></dap-ds-icon-download-line>
  Your document has been successfully downloaded to your device.
</dap-ds-callout>
</dap-ds-stack>

Real-World Patterns

Form validation feedback

Use callouts to provide clear feedback about form validation errors or success states:

<dap-ds-stack>
<dap-ds-callout variant="negative" title="Form Validation Error">
  Please correct the following errors before submitting:
  <ul slot="actions">
    <li>Email address is required</li>
    <li>Password must be at least 8 characters</li>
    <li>Phone number format is invalid</li>
  </ul>
</dap-ds-callout>

<dap-ds-callout variant="positive" title="Application Submitted">
  Your application has been successfully submitted. You will receive a confirmation email shortly.
  <dap-ds-button slot="actions" variant="secondary" size="xs">
    View Status
  </dap-ds-button>
</dap-ds-callout>
</dap-ds-stack>

System status and maintenance

Communicate system-wide information and scheduled maintenance:

<dap-ds-stack>
<dap-ds-callout variant="warning" title="Scheduled Maintenance" closeable>
  <dap-ds-icon-tools-line slot="icon"></dap-ds-icon-tools-line>
  Our services will be temporarily unavailable tonight from 11:00 PM to 2:00 AM for scheduled maintenance.
  <dap-ds-button slot="actions" variant="outline" size="xs">
    Learn More
  </dap-ds-button>
</dap-ds-callout>

<dap-ds-callout variant="info" title="New Features Available">
  <dap-ds-icon-lightbulb-fill slot="icon"></dap-ds-icon-lightbulb-fill>
  We've added new search filters and improved the document upload process.
  <dap-ds-stack direction="row" slot="actions">
    <dap-ds-button variant="secondary" size="xs">Tour Features</dap-ds-button>
    <dap-ds-button variant="outline" size="xs">Release Notes</dap-ds-button>
  </dap-ds-stack>
</dap-ds-callout>
</dap-ds-stack>

Government service notifications

Examples specific to government and public service contexts:

<dap-ds-stack>
<dap-ds-callout variant="info" title="Document Processing Status" noBorder="false">
  <dap-ds-icon-file-text-line slot="icon"></dap-ds-icon-file-text-line>
  Your ID card renewal application is being processed. Expected completion: 5-7 business days.
  <dap-ds-button slot="actions" variant="secondary" size="xs">
    Track Application
  </dap-ds-button>
</dap-ds-callout>

<dap-ds-callout variant="warning" title="Action Required" shade="medium">
  <dap-ds-icon-alert-line slot="icon"></dap-ds-icon-alert-line>
  Your tax declaration must be submitted by March 31st. Missing deadline may result in penalties.
  <dap-ds-stack direction="row" slot="actions">
    <dap-ds-button variant="primary" size="xs">Submit Now</dap-ds-button>
    <dap-ds-button variant="secondary" size="xs">Set Reminder</dap-ds-button>
  </dap-ds-stack>
</dap-ds-callout>

<dap-ds-callout variant="positive" title="Service Available Online">
  <dap-ds-icon-computer-line slot="icon"></dap-ds-icon-computer-line>
  You can now renew your driver's license online without visiting an office.
  <dap-ds-button slot="actions" variant="outline" size="xs">
    Start Online Renewal
  </dap-ds-button>
</dap-ds-callout>
</dap-ds-stack>

Accessibility Features

Callouts are designed with accessibility in mind and include several built-in features:

Semantic structure: Uses proper ARIA attributes (role="region", aria-live="polite")
Screen reader support: Automatically announces content changes with aria-live
Keyboard navigation: Full keyboard support including Escape key to close dismissible callouts
Focus management: Proper focus handling for interactive elements
High contrast support: Works with system high contrast modes
Meaningful icons: Icons include aria-hidden="true" to prevent screen reader duplication

Best practices for accessibility

<!-- Always provide meaningful titles -->
<dap-ds-callout title="Form Submission Error" variant="negative">
  Please correct the errors below before resubmitting.
</dap-ds-callout>

<!-- Use clear, actionable language -->
<dap-ds-callout title="Session Timeout Warning" variant="warning" closeable>
  Your session will expire in 5 minutes. Click "Extend Session" to continue working.
  <dap-ds-button slot="actions">Extend Session</dap-ds-button>
</dap-ds-callout>

<!-- Provide custom close button labels when needed -->
<dap-ds-callout 
  closeable 
  closeButtonLabel="Dismiss notification"
  title="Update Available">
  A new version is available for download.
</dap-ds-callout>

Implementation Notes

Responsive behavior

Callouts automatically adapt to different screen sizes:

Desktop: Full layout with all elements visible
Mobile: Horizontal alignment may stack elements vertically on very small screens
Reduced motion: Respects prefers-reduced-motion for animations

Performance considerations

Icons are efficiently cached and reused across instances
Use opened="false" to hide callouts without removing them from the DOM
Consider implementing dismiss persistence for non-critical notifications

Dynamic content patterns

// Creating callouts programmatically
function showNotification(type, title, message) {
  const callout = document.createElement('dap-ds-callout');
  callout.variant = type;
  callout.title = title;
  callout.textContent = message;
  callout.closeable = true;
  
  // Add to notification container
  document.getElementById('notifications').appendChild(callout);
  
  // Auto-dismiss after 5 seconds for non-error messages
  if (type !== 'negative') {
    setTimeout(() => {
      callout.setAttribute('opened', 'false');
      setTimeout(() => callout.remove(), 300);
    }, 5000);
  }
}

// Usage examples
showNotification('positive', 'Success', 'Settings saved successfully');
showNotification('warning', 'Warning', 'Changes will take effect after restart');
showNotification('negative', 'Error', 'Failed to save changes');

Styling considerations

Use appropriate contrast ratios for custom themes
Test with various zoom levels (up to 200%)
Ensure sufficient spacing around interactive elements
Consider dark mode compatibility when customizing colors

Importing

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

Importing React

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

Attributes

Property	Type	Default	Description
`variant`	`'brand'`, `'positive'` , `'info'` , `'warning'` , `'negative'`	`'brand'`	The variant of the callout
`alignment`	`'vertical'`, `'horizontal'`	`'horizontal'`	The alignment of the callout. Can be `vertical` or `horizontal`.
`shade`	`'subtle'`, `'base'` , `'medium'` , `'strong'`	`'base'`	The strongness of the callout. Can be `subtle`, `base`, `medium`, or `strong`.
`noBorder`	`string`	`'true'`	The border of the callout
`closeable`	`boolean`	`false`	If the callout has a close button
`title`	`string`		The header of the callout
`closeButtonLabel`	`string`		The label of the close button
`opened`	`string`	`'true'`	If the callout is opened

Slots

Name	Description
`(default)`	The content of the callout.
`title`	The title of the callout.
`icon`	The icon of the callout.
`actions`	The actions of the callout.
`close`	The close button of the callout.

Events

Event Name	Description	Type
`dds-close`	Fired when the close button is clicked.	`{void }`

CSS Parts

Part Name	Description
`base`	The main callout container.
`icon`	The icon of the callout.
`title`	The title of the callout.
`description`	The description of the callout.
`actions`	The actions of the callout.
`close`	The close button of the callout.

CSS Custom Properties

Property Name	Description
`--dds-callout-padding`	Padding of the callout content. Default: var(--dds-spacing-300)
`--dds-callout-gap`	Gap between elements in horizontal layout. Default: var(--dds-spacing-300)
`--dds-callout-icon-size`	Size of the icon. Default: var(--dds-spacing-600)
`--dds-callout-title-color`	Color of the title text. Default: var(--dds-text-neutral-strong)
`--dds-callout-description-color`	Color of the description text. Default: var(--dds-text-neutral-base)
`--dds-callout-title-font-size`	Font size of the title. Default: var(--dds-font-base)
`--dds-callout-description-font-size`	Font size of the description. Default: var(--dds-font-base)
`--dds-callout-title-font-weight`	Font weight of the title. Default: var(--dds-font-weight-bold)
`--dds-callout-description-font-weight`	Font weight of the description. Default: var(--dds-font-weight-medium)
`--dds-callout-actions-font-weight`	Font weight of the actions. Default: var(--dds-font-weight-bold)
`--dds-callout-actions-gap`	Gap between action items. Default: var(--dds-spacing-400)
`--dds-callout-content-gap`	Gap between content elements. Default: var(--dds-spacing-100)
`--dds-callout-border-radius`	Border radius of the callout. Default: var(--dds-radius-base)
`--dds-callout-brand-background`	Brand variant background color. Default: var(--dds-background-brand-base)
`--dds-callout-brand-background-subtle`	Brand variant subtle background color. Default: var(--dds-background-brand-subtle)
`--dds-callout-brand-background-medium`	Brand variant medium background color. Default: var(--dds-background-brand-medium)
`--dds-callout-brand-background-strong`	Brand variant strong background color. Default: var(--dds-background-brand-strong)
`--dds-callout-brand-icon`	Brand variant icon color. Default: var(--dds-icon-brand-subtle)
`--dds-callout-brand-border`	Brand variant border color. Default: var(--dds-border-brand-subtle)
`--dds-callout-info-background`	Info variant background color. Default: var(--dds-background-informative-base)
`--dds-callout-info-background-subtle`	Info variant subtle background color. Default: var(--dds-background-informative-subtle)
`--dds-callout-info-background-medium`	Info variant medium background color. Default: var(--dds-background-informative-medium)
`--dds-callout-info-background-strong`	Info variant strong background color. Default: var(--dds-background-informative-strong)
`--dds-callout-info-icon`	Info variant icon color. Default: var(--dds-icon-informative-subtle)
`--dds-callout-info-border`	Info variant border color. Default: var(--dds-border-informative-subtle)
`--dds-callout-positive-background`	Positive variant background color. Default: var(--dds-background-positive-base)
`--dds-callout-positive-background-subtle`	Positive variant subtle background color. Default: var(--dds-background-positive-subtle)
`--dds-callout-positive-background-medium`	Positive variant medium background color. Default: var(--dds-background-positive-medium)
`--dds-callout-positive-background-strong`	Positive variant strong background color. Default: var(--dds-background-positive-strong)
`--dds-callout-positive-icon`	Positive variant icon color. Default: var(--dds-icon-positive-subtle)
`--dds-callout-positive-border`	Positive variant border color. Default: var(--dds-border-positive-subtle)
`--dds-callout-warning-background`	Warning variant background color. Default: var(--dds-background-warning-base)
`--dds-callout-warning-background-subtle`	Warning variant subtle background color. Default: var(--dds-background-warning-subtle)
`--dds-callout-warning-background-medium`	Warning variant medium background color. Default: var(--dds-background-warning-medium)
`--dds-callout-warning-background-strong`	Warning variant strong background color. Default: var(--dds-background-warning-strong)
`--dds-callout-warning-icon`	Warning variant icon color. Default: var(--dds-icon-neutral-strong)
`--dds-callout-warning-border`	Warning variant border color. Default: var(--dds-border-warning-subtle)
`--dds-callout-negative-background`	Negative variant background color. Default: var(--dds-background-negative-base)
`--dds-callout-negative-background-subtle`	Negative variant subtle background color. Default: var(--dds-background-negative-subtle)
`--dds-callout-negative-background-medium`	Negative variant medium background color. Default: var(--dds-background-negative-medium)
`--dds-callout-negative-background-strong`	Negative variant strong background color. Default: var(--dds-background-negative-strong)
`--dds-callout-negative-icon`	Negative variant icon color. Default: var(--dds-icon-negative-subtle)
`--dds-callout-negative-border`	Negative variant border color. Default: var(--dds-border-negative-subtle)