IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Notice

/

Design

Display important information specific to an interface.

Use the page notice to deliver a timely message regarding the entire interface, not just one section or task.

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

If the information does pertain to just one section, use a note. (And for immediate feedback as the result of a workflow, go with a toast.)

Type

All page notices are displayed in line, fixed to the top of the primary content area of the given page.

IconInformation

Hudl Assist has added 24 credits to your accountSubmit any of this season's game or opponent video to have it broken down for you and sent back within 24 hours.

Information: The information notice presents a neutral update. Use this to provide additional info that doesn’t require any action.

State

All notices appear as soon as the page loads. They should remain dismissable either with an actual dismiss or by completing the action listed. All notices (except for critical) should permanently disappear once they’ve been dismissed.

Critical notices will disappear when dismissed, but only for that session. If the action has not been completed, the notice will reappear on the next page load.

Don't force notices to persist without the ability to dismiss.

Don'tforce notices to persist without the ability to dismiss.

Do include a way for users to remove the notice.

Doinclude a way for users to remove the notice.

Mobile

Space is at a premium when designing notices for mobile devices so be considerate of the message length within a notice.

Usage

Feedback

Every notice provides a certain type of feedback, emphasized by a color and feedback 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.

Actions

Every critical notice should include an action to help the user solve their issue. The action itself is optional on all other notices. Just be sure to weigh the value it may (or may not) add.

Position

A notice is always positioned beneath the navbar within the primary content area of the given page. It should span the full width of the page until the natural max-width is achieved.

Don't position a page notice above a sidebar or side panel.

Don'tposition a page notice above a sidebar or side panel.

Do keep a notice in line with the primary content area.

Dokeep a notice in line with the primary content area.

Microcopy

Case & Punctuation

Notices follow our non-label text guidelines—use sentence case with appropriate punctuation.

Don't use crazy punctuation to level up the message.

Don'tuse crazy punctuation to level up the message.

Do use complete sentences followed by periods.

Douse complete sentences followed by periods.

Content Length

Make the content readable and don’t go overboard. Keep it brief with the most important info at the front, ideally less than 200 characters.

Don't overwhelm the user with unnecessary information.

Don'toverwhelm the user with unnecessary information.

Do keep the message short and to the point.

Dokeep the message short and to the point.

Titles

Titles should be concise with keywords at the front. The content should relate directly to the action they’d need to take.

Don't explain the entire message in the title.

Don'texplain the entire message in the title.

Do focus on the most important info.

Dofocus on the most important info.

Actions

Try limiting actions to a single verb. If you can’t, stick to a three-word phrase.

Don't make button labels complete sentences.

Don'tmake button labels complete sentences.

Do keep things simple with a single verb.

Dokeep things simple with a single verb.

Accessibility

Audit Results

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

PlatformVisualInteractiveAutomatedDetails
ReactIconConfirmation PassIconConfirmation PassIconConfirmation Pass
React NativeIconConfirmation PassIconCritical ViolationsIconWarning N/A
  • IconCriticalThe accessibilityLabel prop should be used on the dismiss button since the icon contains no text.
  • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)

Platform

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