Note
Notes bring attention to supplemental information in non-critical contexts.
Also known as: alert, annotation, aside, callout, helper note, info message, inline alert, inline note, status message
<bolt-note>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore <a href="#">magna aliqua</a>. Ullamcorper morbi
tincidunt ornare massa eget egestas purus viverra accumsan. Quisque sagittis
purus sit amet volutpat consequat mauris nunc.
</bolt-note><bolt-note
type="warning"
>
Hic sunt dracones. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore <a href="#">magna aliqua</a>.
Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan.
Quisque sagittis purus sit amet volutpat consequat mauris nunc.
</bolt-note>Elements
Permalink to "Elements"<bolt-note>
Permalink to "<bolt-note>"properties
Permalink to "properties"- heading (optional)
- Configures the displayed header in rendered output.
- Default value is based on configured
type - Setting to a blank string (
"") will remove the header from output.
- type (optional)
- Determines the visual appearance of the Note.
- Values:
info(default)warning
General guidelines
Permalink to "General guidelines"- Note is intended to give users a less prominent, persistent, always visible, context sensitive message.
- Note is only offered in two different types: Warning and Information.
- Note is not intended as replacement for standard Notifications.
When to use
Permalink to "When to use"- When dealing with dense interfaces, limited space or when a message needs to be persistent, visible and is sensitive to its surrounding context.
- If the message communicates caveats of an action or configuration.
When not to use
Permalink to "When not to use"- When a message does not apply to all users or is global in nature.
- Note should not be used to communicate system, task or workflow status.
When to use something else
Permalink to "When to use something else"- When a message is contextually relevant but does not need to be visible at all times, use Contextual help.
- When a message applies to an entire page, site, or step within a flow, use Notification instead.
Do
- Use Note for dense interfaces where space is an issue.
- Use Note for a contextual message or warning.
Don't
- Don't use Note as a replacement for standard notifications.
- Don't use different colors, icons or versions of Note than what is offered.
Content guidelines
Permalink to "Content guidelines"- Note should use sentence case for both the title and message.
ARIA Role
Permalink to "ARIA Role"The Note component makes use of role="note" as documented by WAI-ARIA to describe "a section whose content is parenthetic or ancillary to the main content of the resource".
- It is not intended to be interactive (i.e., it is normally not made focusable)
- It is not intended to be used as a live region
(e.g.,
role="alert"androle="status")- Consider the Notification component instead.
Color Contrast
Permalink to "Color Contrast"Given that a Note's accent color is locked to global theme colors (e.g., info and warning), its accessible color contrast will vary depending on the background color it's placed on.
- Avoid using the component on backgrounds that do not match the global default theme background.
All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.