Notification

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

Loading...

<Notification>Your password was updated successfully.</Notification>

<Notification>Your password was updated successfully.</Notification>

Introduction

import { Notification } from '@telus-uds/components-base'

Notification is a banner that highlights important messages:

• Status message to show there is an error or outage of services
• Confirmation message in response to user action
• Account information letting the user know they have almost used all their data

Guidance

• Use simple text content only, such as bold text or links. Don’t use other complex components or paragraphs.
• Show notifications before the content that the message is related to, otherwise show at the top of the main content
• Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
• When showing multiple notifications, show them in order of importance from top to bottom
• The icon and colour will indicate meaning and importance
• Use variant.style to set the visual style of the notification
• Use dismissible prop to enable dismissible functionality
• Use system prop to set the visual style of the notification and denote an announcement from the system or application

When to use the system prop?

• Use system to show system-based messages coming from the application
• Don’t use system when the message is in response to user action

Accessibility

If a notification is shown during user interaction, users of assistive technology may not notice it appear as sighted users would. To ensure the notification content is read by screenreaders and similar tools, ensure that the Notification is rendered inside a "live" region.

This can be done either:

• Cross-platform: by rendering the Notification inside a container that accepts React Native's accessibility props, such as Box, Card, StackView or StackWrap, or a React Native View, then giving that component the prop accessibilityLiveRegion="polite" (which on web maps to aria-live="polite").
• Web-only: by rendering the Notification inside a HTML container with aria-live="polite"

Note that the "live" container should be rendered initially, before the Notification is added.

Loading...

function LiveExample() { const [pressed, setPressed] = useState(false) const handlePress = () => setPressed(true) return ( <StackView space={3} accessibilityLiveRegion="polite"> {pressed && ( <Notification variant={{ style: 'success' }}> Data has been successfully saved. </Notification> )} <Button onPress={handlePress}>Save data</Button> </StackView> ) }

function LiveExample() {
  const [pressed, setPressed] = useState(false)
  const handlePress = () => setPressed(true)
  return (
    <StackView space={3} accessibilityLiveRegion="polite">
      {pressed && (
        <Notification variant={{ style: 'success' }}>
          Data has been successfully saved.
        </Notification>
      )}
      <Button onPress={handlePress}>Save data</Button>
    </StackView>
  )
}

Props

Name	Type	Default	Description
copy	union	'en'	Select english or french copy for the accessible label of the dismiss button.
children	union		Content of the `Notification`.
system	bool		Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
dismissible	bool		Use the `dismissible` prop to allow users to dismiss the Notification at any time.
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details