Notice
Calcite 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 learn more hyperlink) 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 Modal or Alert when more immediate attention is needed.
Usage
- Inline tip messaging
- Advisory or warning messaging
- Hints and other non-critical info
Sample
Best practices
Below are important guidelines on using the Notice component.


Accessibility
Keyboard navigation
Key | Function |
---|---|
Tab | Move focus to next item. If the current focus is the last item, the focus will exit the component |
Tab and Shift | Move focus to previous item. If the current focus is the first item, the focus will exit the component |
Writing and copy


API reference
Properties
Property | Attribute | Description | Type | Values |
---|---|---|---|---|
active | active | When true, the `calcite-notice` is active. | true false | |
color | color | The color for the `calcite-notice`. Color will apply to top border and icon. | blue (default) green red yellow | |
dismissible | dismissible | Shows a button the user can click to dismiss the `calcite-notice`. | true false | |
icon | icon | When present, shows a default recommended icon. You can also pass a calcite-ui-icon name to display a requested icon. | ||
intlClose | intl-close | Accessible label for the close button. | "Close" (default) | |
scale | scale | Specify the scale of `calcite-notice`. | l m (default) s | |
width | width | Specify the width of the `calcite-notice`. | auto (default) full half |
Events
Name | Description | Detail |
---|---|---|
calciteNoticeClose | Fired when `calcite-notice` is closed. | any |
calciteNoticeOpen | Fired when `calcite-notice` is opened. | any |
Methods
Name | Description | Signature | Returns |
---|---|---|---|
setFocus | Sets focus on the `calcite-notice`. | setFocus() => Promise<void> | Promise<void> |
Slots
Name | Description |
---|---|
actions-end | A slot for adding actions to the end of the `calcite-notice` (optional). It is recommended to use two or less actions. |
link | A slot for adding actions to take, such as: undo, try again, link to page, etc. (optional). |
message | A slot for adding the message. |
title | A slot for adding the title (optional). |
Styles
Name | Description | CSS Variable |
---|---|---|
--calcite-notice-width | The width of `calcite-notice`. | --calcite-notice-width |