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.