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 border attribute to true.

<dap-ds-callout border 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 closeButton attribute to true. You can listen to the dds-close event to handle the close action.

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

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'

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.

Attributes

Property	Type	Default	Description
`variant`	`CalloutVariant`	`'brand'`	The variant of the callout. Can be `brand`, `info`, `positive`, `warning`, or `negative`.
`alignment`	`Alignment`	`'horizontal'`	The alignment of the callout. Can be `vertical` or `horizontal`.
`shade`	`BackgroundShade`	`'base'`	The strongness of the callout. Can be `subtle`, `base`, `medium`, or `strong`.
`border`	`boolean`	`false`	The border of the callout.
`closeable`	`boolean`	`false`	If the callout has a close button.
`closeButtonLabel`	`string`		The label of the close button.
`opened`	`string`	`'true'`	If the callout is opened.
`title`	`string`		The header 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.