Notification
Notification are a type of alert. Notifications succinctly message relevant information. They’re timely, easy to understand, and have a clear purpose. Be straightforward in tone and action to help guide people through.
Import
Component Level Notification
Page Level Notification
Page Level Notification with Links
Page Level Notification without Links
Props
Page Level Notification Props
| Name | Description | Default |
|---|---|---|
| type | Determines icon and color of notification. "success", "caution", "info", or "critical" "success" | "caution" | "info" | "critical" | info |
| children | Contents of message body ReactNode | - |
| isDismissible | If false, hides the close button boolean | true |
| aria-live | Set aria-live politeness level to "assertive", "polite", or "off" "off" | "assertive" | "polite" | - |
| headingSlot | Text content of heading ReactNode | - |
| actionSlot | Contents of action slot at the bottom of notification. Intended for links and buttons ReactNode | - |
| actionSlotOrientation | Sets the orientation of the contents of the action slot. "horizontal" or "vertical" The orientation sets a flex direction and margins on each child in the action slot "horizontal" | "vertical" | horizontal |
| icon | Custom icon displayed in notification ReactNode | - |
| defaultShow | If false, hides the contents inside aria-live container but keeps aria-live container mounted on page boolean | true |
| onDismiss | Callback function when the notification is dismissed MouseEventHandler<HTMLButtonElement> | () => {} |
| isIconFilled | If false, shows unfilled icon boolean | true |
| id | id of element with notification message contents string | - |
| role | The aria role attribute of the element "log" | "status" | "alert" | "progressbar" | "marquee" | "timer" | - |
| closeButtonProps | Props to spread to the close button Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "type" | ... 1 more ... | "onClick"> | - |
| labelOverrides | Overrides for labels that have been defaulted in the component. PageLevelNotificationLabelOverrides | - |
Component Level Notification Props
| Name | Description | Default |
|---|---|---|
| status | Determines the icon and color of the notification FieldControlStatus | error |
| showIcon | If false, hides the status icon boolean | true |
| show | If false, hides the contents inside aria-live container but keeps aria-live container mounted on page boolean | true |
| id | id of element with notification message contents string | - |
| aria-live | Set aria-live politeness level to "assertive", "polite", or "off" "off" | "assertive" | "polite" | - |
| children | Contents of the notification ReactNode | - |
| isIconFilled | If false, shows unfilled icon boolean | true |
| role | The aria role attribute of the element "status" | "log" | "alert" | "progressbar" | "marquee" | "timer" | - |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.