DÁP Design System - Callout webcomponent

Callout

Callout is a component that can be used to display important information to the user. It can be used to display warnings, errors, or other important information.

Design system docs

Examples

Default callout

<dap-ds-callout title="Info">
This component is under contruction. Please check back later.
</dap-ds-callout>

Variants

Callouts can have different variants to indicate the importance of the message. Default variant is brand.

<dap-ds-stack>
  <dap-ds-callout variant="brand" title="Brand">
    This component is under contruction. Please check back later.
  </dap-ds-callout>
  <dap-ds-callout variant="info" title="Info">
    This component is under contruction. Please check back later.
  </dap-ds-callout>
  <dap-ds-callout variant="positive" title="Positive">
    This component is under contruction. Please check back later.
  </dap-ds-callout>
  <dap-ds-callout variant="warning" title="Warning">
    This component is under contruction. Please check back later.
  </dap-ds-callout>
  <dap-ds-callout variant="negative" title="Negative">
    This component is under contruction. Please check back later.
  </dap-ds-callout>
</dap-ds-stack>

Shade

All callout variants can have different shades which is basically the background color shade. Default shade is base.

<dap-ds-stack>
  <dap-ds-callout shade="subtle" title="subtle">
    This component is under contruction. Please check back later.
  </dap-ds-callout>
  <dap-ds-callout shade="base" title="base">
    This component is under contruction. Please check back later.
  </dap-ds-callout>
  <dap-ds-callout shade="medium" title="medium">
    This component is under contruction. Please check back later.
  </dap-ds-callout>
  <dap-ds-callout shade="strong" title="strong">
    This component is under contruction. Please check back later.
  </dap-ds-callout>
</dap-ds-stack>

Alignment

Callouts can be aligned horizontally or vertically. Default alignment is horizontal.

<dap-ds-stack>
  <dap-ds-callout alignment="horizontal" title="Horizontal">
    This component is under contruction. Please check back later.
  </dap-ds-callout>
  <dap-ds-callout alignment="vertical" title="Vertical">
    This component is under contruction. Please check back later.
  </dap-ds-callout>
</dap-ds-stack>

Border

Callouts can have border by setting the noBorder attribute to false.

<dap-ds-callout noBorder="false" title="Border">
  This component is under contruction. Please check back later.
</dap-ds-callout>

Close button

Callouts can have a close button by setting the closeable attribute to true. You can listen to the dds-close event to handle the close action.

HTML

This component is under contruction. Please check back later.

document.querySelector('dap-ds-callout').addEventListener('dds-close', () => {
  item.setAttribute('opened', 'false')
  console.log('Callout closed');
});

Icon

Callouts can have an icon by adding content to the slot='icon'. It can be any svg icon.

<dap-ds-stack>
  <dap-ds-callout title="Slot icon">
    <dap-ds-icon-cookie-line slot="icon"></dap-ds-icon-cookie-line>
    This component is under contruction. Please check back later.
  </dap-ds-callout>
</dap-ds-stack>

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
`dds-close`	Fired when the close button is clicked.

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)