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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Best practices

Below are important guidelines on using the Notice component.

Correct Notice sparingly
Do use Notices sparingly, and for direct user attention regarding a workflow or interface.
Avoid Notice layouts groups
Avoid using Notices as layout components, or in groups.

Accessibility

Keyboard navigation

KeyFunction
TabMove focus to next item. If the current focus is the last item, the focus will exit the component
Tab and ShiftMove focus to previous item. If the current focus is the first item, the focus will exit the component

Writing and copy

Correct Notice writing
Do prefer brevity in Notices. Be quick and specific with its message.
Avoid Notice writing
Avoid large amounts of copy in Notices, and avoid error codes if possible.

API reference

calcite-notice
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
activeactive

When true, the `calcite-notice` is active.

booleanA boolean property should be present, or not
truefalse
colorcolor

The color for the `calcite-notice`. Color will apply to top border and icon.

typedChoose from a set of typed values
blue (default)greenredyellow
dismissibledismissible

Shows a button the user can click to dismiss the `calcite-notice`.

optional
booleanA boolean property should be present, or not
truefalse
iconicon

When present, shows a default recommended icon. You can also pass a calcite-ui-icon name to display a requested icon.

icon with defaultSet to true to get a recommended default icon. You can also pass a valid calcite ui icon string
true
intlCloseintl-close

Accessible label for the close button.

stringA custom string
"Close" (default)
scalescale

Specify the scale of `calcite-notice`.

typedChoose from a set of typed values
lm (default)s
widthwidth

Specify the width of the `calcite-notice`.

typedChoose from a set of typed values
auto (default)fullhalf

Events

NameDescriptionDetail
calciteNoticeClose

Fired when `calcite-notice` is closed.

bubblescomposedcancelable
any
calciteNoticeOpen

Fired when `calcite-notice` is opened.

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the `calcite-notice`.

setFocus() => Promise<void>Promise<void>

Slots

NameDescription
actions-end

A slot for adding actions to the end of the `calcite-notice` (optional). It is recommended to use two or less actions.

message

A slot for adding the message.

title

A slot for adding the title (optional).

Styles

NameDescriptionCSS Variable
--calcite-notice-width

The width of `calcite-notice`.

--calcite-notice-width

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.