Notice
Used to highlight pertinent information.The <Notice /> component is used to highlight information which is pertinent in a feature or page. They can appear after a user has made an action to clarify changes or be presented prior to an action to help inform the user of what to expect.
Notices are available in a variety of tones for different situations. informative is the default tone.
Descriptions are mandatory in a notice. For the best experience the description should be kept succinct especially when a title isn’t applied.
Text should be wrapped inside a <Text /> component
The title is an optional prop that can be applied to a notice. The title can be applied when the description may have a considerable amount of detail, or more context is needed.
Notices have the option to have ‘primary’ and ‘secondary’ actions added to offer users the ability to take a next step. This can be supplied via the actions prop.
If there is only 1 action, then that will be considered the primary action. If there are 2 actions, the second action in the action array will be considered as the secondary action.
A secondary action can only exist if a primary action exists as well.
For actions, an href can be used instead of an onClick. Using the href will convert the button into a link that navigates the user to another page.
A common pattern is to let the user dismiss the notice, as a way of acknowledging that the message has been received and to free up screen real estate.
You can use the actions to implement this pattern.
For most cases, use a conversational tone for the dismissing action’s label, such as "Okay, got it".
The <Notice /> component will fill a component or section container in a page.
Use regular html tags such as <br /> to format the text. THe following example showcases a multi-lined notice.
Notice components often display important status messages that should be announced to screen readers. Wrap Notice with LiveRegion when the content changes dynamically:
Important: LiveRegion components should never be unmounted. The LiveRegion container stays in the DOM while only the Notice content appears and disappears. This ensures screen readers can detect and announce changes properly.
Use LiveRegion for:
- Important status updates
- Dynamic content that appears and disappears
- Critical alerts that must be announced immediately
Don't use LiveRegion for:
- Static notices that don't change
- Notices that are always visible
- Decorative or informational content
The LiveRegion component becomes visually hidden when empty and announces content changes to screen readers.