Notice

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

3 samples
1
2
3
4
5
6
7
<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>
v3.0.2

Best practices

While visually similar to Alert, Notice has distinct capabilities and intended use cases. It is positioned relatively within a parent element.

Comparison

NoticeThis component
Best for informative, contextually relevant information.
Can be open at page load, or displayed as a result of user action.
Can be persisted in the interface or made closable.
AlertAlternative
Best for ephemeral, workflow specific messaging.
Generally should not be open at page load.
Most often displayed as a result of user interaction.
DialogAlternative
Best for complex or narrative content that contains interactive elements or media.
Can at times be open at page load for introductory messaging.
Generally presented as a result of user invocation.

Recommendations

Correct Notice sparingly
Do use Notices sparingly, and for direct user attention regarding a workflow or interface.
Avoid Notice layouts groups
Avoid using Notices to represent items or entities in a group.

Accessibility

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

Keyboard navigation

KeyFunction
TabMoves focus to the next focusable element. If the current focus is the last element, focus will exit the component.
Tab and ShiftMoves focus to previous focusable element. If the current focus is the first element, 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

Properties

PropertyAttributeDescriptionTypeDefault
closableclosableWhen true, a close button is added to the component.booleanfalse
iconiconWhen true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.boolean | string
iconFlipRtlicon-flip-rtlWhen true, the icon will be flipped when the element direction is right-to-left ("rtl").booleanfalse
kindkindSpecifies the kind of the component, which will apply to top border and icon."brand" | "danger" | "info" | "success" | "warning""brand"
messageOverridesUse this property to override individual strings used by the component.{ close?: string; }
openopenWhen true, the component is visible.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
widthwidthSpecifies the width of the component. [Deprecated] The "half" value is deprecated, use "full" instead."auto" | "full" | "half""auto"

Slots

NameDescription
titleA slot for adding the title.
messageA slot for adding the message.
actions-endA slot for adding calcite-actions to the end of the component. It is recommended to use two or less actions.

Styles

NameDescription
--calcite-notice-background-colorSpecifies the component's background color.
--calcite-notice-close-background-color-focusSpecifies the component's background color when focused.
--calcite-notice-close-background-color-pressSpecifies the component's background color when active.
--calcite-notice-close-text-color-hoverSpecifies the background color of the component's close button when hovered.
--calcite-notice-close-text-colorSpecifies the text color of the component's close button.
--calcite-notice-content-text-colorSpecifies the component's content text color.
--calcite-notice-width
deprecated Specifies the component's width.

Events

NameDescriptionBehavior
calciteNoticeBeforeCloseFires when the component is requested to be closed and before the closing transition begins.bubblescomposed
calciteNoticeBeforeOpenFires when the component is added to the DOM but not rendered, and before the opening transition begins.bubblescomposed
calciteNoticeCloseFires when the component is closed and animation is complete.bubblescomposed
calciteNoticeOpenFires when the component is open and animation is complete.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component's first focusable element.setFocus(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close