Preview
Usage #
A notice delivers informational and assistive messages that inform the user about product or account statuses and related actions. It can suggest an action or dismissed by the user, though neither are required. For time-based notifications, see Toast.
Variants and Examples #
Base Styles #
Used in most scenarios when the message should be noticeable but not dominate.
<dt-notice title="Base title (optional)" > <span> Message body with <a href="#" class="d-link" :class="linkClass" >a link</a>. </span> <template #action> <dt-button :size="200" importance="outlined" kind="muted" @click="onClick" > Action </dt-button> </template> </dt-notice> <dt-notice title="Info title (optional)" kind="info" > <span> Message body with <a href="#" class="d-link" :class="linkClass" >a link</a>. </span> <template #action> <dt-button :size="200" importance="outlined" kind="muted" @click="onClick" > Action </dt-button> </template> </dt-notice> <dt-notice title="Critical title (optional)" kind="critical" > <span> Message body with <a href="#" class="d-link" :class="linkClass" >a link</a>. </span> <template #action> <dt-button :size="200" importance="outlined" kind="muted" @click="onClick" > Action </dt-button> </template> </dt-notice> <dt-notice title="Positive title (optional)" kind="positive" > <span> Message body with <a href="#" class="d-link" :class="linkClass" >a link</a>. </span> <template #action> <dt-button :size="200" importance="outlined" kind="muted" @click="onClick" > Action </dt-button> </template> </dt-notice> <dt-notice title="Warning title (optional)" kind="warning" > <span> Message body with <a href="#" class="d-link" :class="linkClass" >a link</a>. </span> <template #action> <dt-button :size="200" importance="outlined" kind="muted" @click="onClick" > Action </dt-button> </template> </dt-notice>
Important #
Used occasionally in scenarios when the message needs to dominate.
<dt-notice title="Base title (optional)" important > <span> Message body with <a href="#" class="d-link" :class="linkClass" >a link</a>. </span> <template #action> <dt-button :size="200" importance="outlined" kind="inverted" @click="onClick" > Action </dt-button> </template> </dt-notice> <dt-notice title="Info title (optional)" kind="info" important > <span> Message body with <a href="#" class="d-link" :class="linkClass" >a link</a>. </span> <template #action> <dt-button :size="200" importance="outlined" kind="inverted" @click="onClick" > Action </dt-button> </template> </dt-notice> <dt-notice title="Critical title (optional)" kind="critical" important > <span> Message body with <a href="#" class="d-link" :class="linkClass" >a link</a>. </span> <template #action> <dt-button :size="200" importance="outlined" kind="inverted" @click="onClick" > Action </dt-button> </template> </dt-notice> <dt-notice title="Positive title (optional)" kind="positive" important > <span> Message body with <a href="#" class="d-link" :class="linkClass" >a link</a>. </span> <template #action> <dt-button :size="200" importance="outlined" kind="inverted" @click="onClick" > Action </dt-button> </template> </dt-notice> <dt-notice title="Warning title (optional)" kind="warning" important > <span> Message body with <a href="#" class="d-link" :class="linkClass" >a link</a>. </span> <template #action> <dt-button :size="200" importance="outlined" kind="inverted" @click="onClick" > Action </dt-button> </template> </dt-notice>
Truncate Text #
Truncates the text instead of wrapping it. Useful when the Notice needs to have a fixed height.
<dt-notice :truncate-text="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." > <span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </span> </dt-notice>
Vue API #
import { DtNotice } from '@dialpad/dialtone-vue';Slots
Name
|
Type
|
|---|---|
action | Enter a possible action for the user to take, such as a link to another page |
default | the main textual content of the notice |
header | Slot for the header |
icon | Slot for custom icon |
Props
Name
|
Default
|
Type
|
|---|---|---|
actionClass | '' | string|array|object Additional class name for the action wrapper element. |
contentClass | '' | string|array|object Additional class name for the content wrapper element. |
contentId | string Sets an ID on the content element of the component. Useful for aria-describedby
or aria-labelledby or any other reason you may need an id to refer to the content. | |
headerClass | '' | string|array|object Additional class name for the header wrapper element. |
headerId | string Sets an ID on the header element of the component. Useful for aria-describedby
or aria-labelledby or any other reason you may need an id to refer to the header. | |
headerText | string Header text of the notice. This can be left blank to remove the header from the notice entirely. | |
iconClass | '' | string|array|object Additional class name for the icon wrapper element. |
important | false |
"true"
|
"false"
Used in scenarios where the message needs to visually dominate the screen.
This will also change the aria role from status to alert. |
kind | 'base' |
"base"
|
"critical"
|
"info"
|
"positive"
|
"warning"
Severity level of the notice, sets the icon and background |
role | 'status' |
"alert"
|
"alertdialog"
|
"status"
Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an
important message that does not contain any interactive elements. 'alertdialog' is used to communicate an
important message that does contain interactive elements. |
showAction | true |
"true"
|
"false"
Shows the action in the notice |
showClose | true |
"true"
|
"false"
Shows the close button in the notice |
showIcon | true |
"true"
|
"false"
Shows the icon in the notice |
truncateText | false |
"true"
|
"false"
Truncates the content instead of wrapping.
Used when the notice needs to have a fixed height. |
Events
Name
|
Type
|
|---|---|
click | PointerEvent | KeyboardEvent Native button click event |
close | Close button click event |
Classes #
Class
|
Applies to
|
Description
|
|---|
Accessibility #
Item
|
Applies to
|
Description
|
|---|