Notices provide inline contextual tips or advice to the user.
Overview
Notice provides information on page load and utilizes UI state colors to help convey meaning. Use Notice when required attention is low to moderate. Notice can provide a single action for the user, such as a Link in the Link slot along with a dismissal option. Notice is designed to be used sparingly and not in groups. Don't rely too heavily on Notice for critical messages as its styling is meant to be relatively unobtrusive.
Refer to Dialog or Alert when more immediate attention is needed.
Usage
- Inline tip messaging
- Advisory or warning messaging
- Hints and other non-critical info
Sample
<calcite-notice open icon="layers-reference">
<div slot="title">Try this trick next time</div>
<div slot="message">Level up your skills - Select and take action on multiple layers at once.</div>
<calcite-link slot="link" title="my action">
Read more
</calcite-link>
</calcite-notice>
Best practices
While visually similar to Alert, Notice has distinct capabilities and intended use cases. It is positioned relatively within a parent element.
Comparison
open
at page load, or displayed as a result of user action.closable
.open
at page load.open
at page load for introductory messaging.Recommendations


Accessibility
If using the Link slot, follow the Link accessibility guidance on unique link text.
Keyboard navigation
Key | Function |
---|---|
Tab | Moves focus to the next focusable element. If the current focus is the last element, focus will exit the component. |
Tab and Shift | Moves focus to previous focusable element. If the current focus is the first element, focus will exit the component. |
Writing and copy


API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
closable | closable | When true , a close button is added to the component. | boolean | false |
icon | icon | When true , shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | boolean | string | |
iconFlipRtl | icon-flip-rtl | When true , the icon will be flipped when the element direction is right-to-left ("rtl" ). | boolean | false |
kind | kind | Specifies the kind of the component, which will apply to top border and icon. | "brand" | "danger" | "info" | "success" | "warning" | "brand" |
messageOverrides | Use this property to override individual strings used by the component. | { close?: string; } | ||
open | open | When true , the component is visible. | boolean | false |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
width | width | Specifies the width of the component. [Deprecated] The "half" value is deprecated, use "full" instead. | "auto" | "full" | "half" | "auto" |
Slots
Name | Description |
---|---|
title | A slot for adding the title. |
message | A slot for adding the message. |
link | A slot for adding a calcite-action to take, such as: "undo", "try again", "link to page", etc. |
actions-end | A slot for adding calcite-action s to the end of the component. It is recommended to use two or less actions. |
Styles
Name | Description |
---|---|
--calcite-notice-background-color | Specifies the component's background color. |
--calcite-notice-close-background-color-focus | Specifies the component's background color when focused. |
--calcite-notice-close-background-color-press | Specifies the component's background color when active. |
--calcite-notice-close-text-color-hover | Specifies the background color of the component's close button when hovered. |
--calcite-notice-close-text-color | Specifies the text color of the component's close button. |
--calcite-notice-content-text-color | Specifies the component's content text color. |
--calcite-notice-width |
Events
Name | Description | Behavior |
---|---|---|
calciteNoticeBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. | |
calciteNoticeBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | |
calciteNoticeClose | Fires when the component is closed and animation is complete. | |
calciteNoticeOpen | Fires when the component is open and animation is complete. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the component's first focusable element. | setFocus(): Promise<void> |