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. | truefalse | |
| color | color | The color for the `calcite-notice`. Color will apply to top border and icon. | blue (default)greenredyellow | |
| dismissible | dismissible | Shows a button the user can click to dismiss the `calcite-notice`. | truefalse | |
| 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`. | lm (default)s | |
| width | width | Specify the width of the `calcite-notice`. | auto (default)fullhalf |
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 |