Notice | Calcite Design System

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.

Sample

Usage

Inline tip messaging
Advisory or warning messaging
Hints and other non-critical info

Component comparison

The Notice, Alert, and Dialog components communicate pertinent information and content to users, but each has its own distinct capabilities and set of use cases.

Notice

This component

Best for informative, contextually relevant information.

Displays within the normal flow of content to highlight or add context.

Can be persisted in the interface or made closable.

Alert

Alternative

Best for ephemeral, workflow specific messaging.

Floats over content to provide timely context without interrupting the workflow.

Most often displayed as a result of user interaction.

Dialog

Alternative

Best for complex or narrative content that contains interactive elements or media.

Floats over content to provide timely context or interactions that interrupt the workflow.

Most often displayed as a result of user interaction.

Best practices

Recommendations

A Panel with a single Notice above a Tree component. The Notice alerts users that advanced analysis is available.

Do use Notice sparingly and for direct user attention regarding a workflow or interface.

A Panel with four Notices that each represent different map layers.

Avoid using Notices to represent items or entities in a group. Consider using other components such as Block, Card, or List.

Accessibility

If using the Link slot, follow the Link accessibility guidance on unique link text.

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

Do prefer brevity in Notices. Be quick and specific with its message.

Avoid large amounts of copy in Notices, and avoid error codes if possible.

API reference

Properties

Property	Attribute	Description	Type	Default
appearance	appearance	Specifies the appearance of the component.	`Extract<"transparent" \| "outline-fill", Appearance>`	`"outline-fill"`
closable	closable	When `true`, displays a close button in 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.	`IconName \| boolean`
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 the top border and icon.	`Extract<"brand" \| "danger" \| "info" \| "success" \| "warning" \| "neutral", Kind>`	`"brand"`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
open	open	When `true`, the component is visible.	`boolean`	`false`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
width	width	Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.	`Extract<Width, "auto" \| "half" \| "full">`	`"auto"`

Slots

Name	Description
title	A slot for adding a title.
message	A slot for adding a 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 `calcite-action`s.

Styles

Name	Description
--calcite-notice-background-color	When `appearance="outline-fill"`, specifies the component's background color.
--calcite-notice-border-color	When `appearance="outline-fill"`, specifies the component's border color.
--calcite-notice-corner-radius	Specifies the component's border radius.
--calcite-notice-close-background-color	Specifies the background color of the component's close element.
--calcite-notice-close-background-color-hover	Specifies the background color of the component's close element when hovered.
--calcite-notice-close-background-color-focus	deprecated in v5.0.0, removal target v6.0.0 - Use `--calcite-notice-close-background-color-hover` instead. Specifies the background color of the component's close element when hovered.
--calcite-notice-close-background-color-press	Specifies the background color of the component's close element when active.
--calcite-notice-close-icon-color-hover	Specifies the icon color of the component's close element when hovered or active.
--calcite-notice-close-icon-color	Specifies the icon color of the component's close element.
--calcite-notice-title-text-color	Specifies the component's slotted `"title"` content text color.
--calcite-notice-content-text-color	Specifies the component's slotted `"message"` content text color.
--calcite-notice-width	deprecated in v3.0.0, removal target v6.0.0 - Specifies the component's width.
--calcite-notice-shadow	Specifies the component's shadow.

Events

Name	Description	Behavior
calciteNoticeBeforeClose	Fires when the component is requested to be closed and before the closing transition begins.	bubblescomposed
calciteNoticeBeforeOpen	Fires when the component is added to the DOM but not rendered, and before the opening transition begins.	bubblescomposed
calciteNoticeClose	Fires when the component is closed and animation is complete.	bubblescomposed
calciteNoticeOpen	Fires when the component is open and animation is complete.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
setFocus	Sets focus on the component's first focusable element.	`setFocus(options?: FocusOptions): Promise<void>`