IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Note

/

Design

Provide context relevant to one piece of an interface.

The contextual note is meant to further explain a given task or piece of content. It's not important enough to warrant an interruption, but should serve as a heads-up worth knowing then and there.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Note documentation and examples.

For information related to an entire interface, check the notice. And if something comes up as the result of a workflow, use the toast.

Size

Relevant to the note’s size are the sizes of both the icon and text. Consider location and interface density as you choose.

IconInformation

This information will only appear for verified recruiters, not the general public.

X-Small: Micro text and the small icon, when you absolutely need to squeeze it in.

Type

The four note types correspond directly to our feedback icons.

IconInformation

We'll use this email address and cell phone number to send you updates related to your account.

Information: Use this for a message that won’t really affect a given task, more of a neutral FYI.

Mobile

Small and medium notes work well on mobile phones, but reserve the large size for tablet views only.

Usage

Feedback

Every note provides a certain type of feedback, emphasized by a color and icon.

Don't interchange feedback colors and icons.

Don'tinterchange feedback colors and icons.

Do match feedback to the message type.

Domatch feedback to the message type.

Non-Dismissible

Every note is either ever-present or removed by righting a wrong.

Don't allow them to remove context.

Don'tallow them to remove context.

Do display the note for as long as the content is relevant.

Dodisplay the note for as long as the content is relevant.

Relative Importance

Most notes should serve as subtle hints and updates in the interface, tied directly to just one section.

Don't use it to introduce an entire page or discuss a feature’s purpose.

Don'tuse it to introduce an entire page or discuss a feature’s purpose.

Do carefully consider how helpful the note would be.

Docarefully consider how helpful the note would be.

Location

Where a note lives can make all the difference in whether or not it's seen and how effective the message is.

Don't present multiple notes together.

Don'tpresent multiple notes together.

Do place the note right next to whatever it’s discussing.

Doplace the note right next to whatever it’s discussing.

Links

Feel free to hyperlink text in information and warning notes for the sake of providing more details. Just make sure the linked resource is relevant and valuable enough to distract from the current task.

Don't make the link mandatory or use it in place of the note itself.

Don'tmake the link mandatory or use it in place of the note itself.

Do frame it as supplementary to what’s mentioned in the note.

Doframe it as supplementary to what’s mentioned in the note.

Styling

Like tooltips, you should only bold or italicize one phrase per note—never an entire sentence, and only if the styling is absolutely necessary.

Don't style an entire note just to grab a user’s attention.

Don'tstyle an entire note just to grab a user’s attention.

Do use styling for emphasis or clarification.

Douse styling for emphasis or clarification.

Microcopy

Content Length

Each note should be no longer than 170 characters. If you can make it shorter, great. Any longer and you risk interrupting their flow.

Don't ramble when hyperlinked text is always an option.

Don'tramble when hyperlinked text is always an option.

Do get to the point with only the most relevant info.

Doget to the point with only the most relevant info.

Whose Interface?

Check these guidelines and remember “we’re” always talking to a “you”.

Don't write in third-person and make things weirdly impersonal.

Don'twrite in third-person and make things weirdly impersonal.

Do sound like one human talking to another.

Dosound like one human talking to another.

Body Only

Regardless of what purpose the note serves (message or status), you’ll never need a title or subtitle.

Messages should be written as complete sentences with proper punctuation.

Statuses should be no longer than three words, free of punctuation.

Both should be sentence case.

Accessibility

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconConfirmation PassIconConfirmation PassIconConfirmation Pass
React NativeIconConfirmation PassIconConfirmation PassIconWarning N/A

    Platform

    platformnotes
    Web
    • Stick to the guidelines above.
    Apple
    • Stick to the guidelines above.
    Android
    • Stick to the guidelines above.