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

Fine-tune the visual appearance of callouts with CSS custom properties and exposed shadow parts. Tweak padding, spacing, icon sizes, or add accent borders without recreating the component from scratch.

Quick customization with CSS custom properties

Use inline styles or global stylesheets to override the built-in design tokens:

<dap-ds-callout
variant="brand"
title="Customized brand notification"
style={{
  '--dds-callout-brand-background': 'linear-gradient(135deg, var(--dds-brand-400), var(--dds-brand-600))',
  '--dds-callout-title-font-size': '1.125rem',
  '--dds-callout-title-color': 'var(--dds-white-100)',
  '--dds-callout-description-color': 'var(--dds-white-100)',
  '--dds-callout-padding': 'var(--dds-spacing-400)'
}}>
This callout uses custom properties to increase emphasis and contrast.
</dap-ds-callout>
Advanced styling with CSS parts

Experiment with CSS parts such as base, content, icon, title, description, actions, and close to create bespoke layouts. Try the presets below or craft your own styles in the live editor:

Select a presetMinimal OutlineCompact LayoutElevated CardNeon Glow
Copy CSSFormat CSSResetLightDark
CSS Editor
Live Preview

Use the Live CSS Editor to explore the available CSS parts and properties. Learn more

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>
Importing 
import { DapDSCallout } from 'dap-design-system'
Importing React 
import { DapDSCalloutReact } from 'dap-design-system/react'
Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSCallout } from 'dap-design-system/components'
Attributes
PropertyTypeDefaultDescription
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 colors. Can be subtle, base, medium, or strong.
noBorderstring'true'If the callout has a border
closeablebooleanfalseIf the callout has a close button
titlestringThe header of the callout
closeButtonLabelstringThe label of the close button
openedstring'true'If the callout is opened
Slots
NameDescription
(default)The content of the callout.
titleThe title of the callout.
iconThe icon of the callout.
actionsThe actions of the callout.
closeThe close button of the callout.
Events
Event NameDescriptionType
dds-closeFired when the close button is clicked.{void }
CSS Parts
Part NameDescription
baseThe main callout container.
contentThe content of the callout.
card-contentThe content of the card.
iconThe icon of the callout.
titleThe title of the callout.
descriptionThe description of the callout.
actionsThe actions of the callout.
closeThe close button of the callout.
How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-callout::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-callout::part(base),
.my-custom-dap-ds-callout::part(content) {
  /* Shared styles */
}

Example usage:

<dap-ds-callout class="my-custom-dap-ds-callout">
  Callout
</dap-ds-callout>

.my-custom-dap-ds-callout::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.

 CSS Custom Properties
Property NameDescription
--dds-callout-paddingPadding of the callout content. (default: var(--dds-spacing-300))
--dds-callout-gapGap between elements in horizontal layout. (default: var(--dds-spacing-300))
--dds-callout-icon-sizeSize of the icon. (default: var(--dds-spacing-600))
--dds-callout-title-colorColor of the title text. (default: var(--dds-text-neutral-strong))
--dds-callout-description-colorColor of the description text. (default: var(--dds-text-neutral-base))
--dds-callout-title-font-sizeFont size of the title. (default: var(--dds-font-base))
--dds-callout-description-font-sizeFont size of the description. (default: var(--dds-font-base))
--dds-callout-title-font-weightFont weight of the title. (default: var(--dds-font-weight-bold))
--dds-callout-description-font-weightFont weight of the description. (default: var(--dds-font-weight-medium))
--dds-callout-actions-font-weightFont weight of the actions. (default: var(--dds-font-weight-bold))
--dds-callout-actions-gapGap between action items. (default: var(--dds-spacing-400))
--dds-callout-content-gapGap between content elements. (default: var(--dds-spacing-100))
--dds-callout-border-radiusBorder radius of the callout. (default: var(--dds-radius-base))
--dds-callout-brand-backgroundBrand variant background color. (default: var(--dds-background-brand-base))
--dds-callout-brand-background-subtleBrand variant subtle background color. (default: var(--dds-background-brand-subtle))
--dds-callout-brand-background-mediumBrand variant medium background color. (default: var(--dds-background-brand-medium))
--dds-callout-brand-background-strongBrand variant strong background color. (default: var(--dds-background-brand-strong))
--dds-callout-brand-iconBrand variant icon color. (default: var(--dds-icon-brand-subtle))
--dds-callout-brand-borderBrand variant border color. (default: var(--dds-border-brand-subtle))
--dds-callout-info-backgroundInfo variant background color. (default: var(--dds-background-informative-base))
--dds-callout-info-background-subtleInfo variant subtle background color. (default: var(--dds-background-informative-subtle))
--dds-callout-info-background-mediumInfo variant medium background color. (default: var(--dds-background-informative-medium))
--dds-callout-info-background-strongInfo variant strong background color. (default: var(--dds-background-informative-strong))
--dds-callout-info-iconInfo variant icon color. (default: var(--dds-icon-informative-subtle))
--dds-callout-info-borderInfo variant border color. (default: var(--dds-border-informative-subtle))
--dds-callout-positive-backgroundPositive variant background color. (default: var(--dds-background-positive-base))
--dds-callout-positive-background-subtlePositive variant subtle background color. (default: var(--dds-background-positive-subtle))
--dds-callout-positive-background-mediumPositive variant medium background color. (default: var(--dds-background-positive-medium))
--dds-callout-positive-background-strongPositive variant strong background color. (default: var(--dds-background-positive-strong))
--dds-callout-positive-iconPositive variant icon color. (default: var(--dds-icon-positive-subtle))
--dds-callout-positive-borderPositive variant border color. (default: var(--dds-border-positive-subtle))
--dds-callout-warning-backgroundWarning variant background color. (default: var(--dds-background-warning-base))
--dds-callout-warning-background-subtleWarning variant subtle background color. (default: var(--dds-background-warning-subtle))
--dds-callout-warning-background-mediumWarning variant medium background color. (default: var(--dds-background-warning-medium))
--dds-callout-warning-background-strongWarning variant strong background color. (default: var(--dds-background-warning-strong))
--dds-callout-warning-iconWarning variant icon color. (default: var(--dds-icon-neutral-strong))
--dds-callout-warning-borderWarning variant border color. (default: var(--dds-border-warning-subtle))
--dds-callout-negative-backgroundNegative variant background color. (default: var(--dds-background-negative-base))
--dds-callout-negative-background-subtleNegative variant subtle background color. (default: var(--dds-background-negative-subtle))
--dds-callout-negative-background-mediumNegative variant medium background color. (default: var(--dds-background-negative-medium))
--dds-callout-negative-background-strongNegative variant strong background color. (default: var(--dds-background-negative-strong))
--dds-callout-negative-iconNegative variant icon color. (default: var(--dds-icon-negative-subtle))
--dds-callout-negative-borderNegative variant border color. (default: var(--dds-border-negative-subtle))
How to Use CSS Custom Properties

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-callout
  style="--dds-callout-padding: value; --dds-callout-gap: value;">
  Callout
</dap-ds-callout>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-callout {
  --dds-callout-padding: value;
  --dds-callout-gap: value;
  --dds-callout-icon-size: value;
}

<dap-ds-callout class="my-custom-dap-ds-callout">
  Callout
</dap-ds-callout>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-callout {
  --dds-callout-padding: value;
  --dds-callout-gap: value;
}

CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.