Toast

Library

Allium Design Systemweb-only

Repository

github.com/telus/allium-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<Toast toast copy="Shoping Smartphones?" />

<Toast toast copy="Shoping Smartphones?" />

Introduction

import { Toast } from '@telus-uds/ds-allium'

Use Toast to display important content and focus attention.

Guidance

• Select the size that best fits your context
  • Default (medium text)
  • Small (small, compact text)
• Use textAlign to set alignment explicitly
  • By default, text is left-aligned
  • When roundedCorners is set, text is center-aligned
• Use roundedCorners when showing Callout within content bounds
  • Don’t use roundedCorners when showing Callout full-width, edge-to-edge
• Use icon to show Icon

Accessibility

If your toast is dynamically triggered, ensure that the content is appropriately marked up such that it will be announced by assistive technologies. For example use an aria-live region.

Loading...

function() { const [visible, setVisible] = useState(false) return ( <StackView space={3}> <div aria-live={true}> {visible && <Toast toast copy="Shoping Smartphones?" />} </div> <Button onPress={() => setVisible(!visible)}>toggle toast</Button> </StackView> ) }

function() {
  const [visible, setVisible] = useState(false)
  return (
    <StackView space={3}>
      <div aria-live={true}>
        {visible && <Toast toast copy="Shoping Smartphones?" />}
      </div>
      <Button onPress={() => setVisible(!visible)}>toggle toast</Button>
    </StackView>
  )
}

Platform considerations

This component is currently only supported on web.

Props

Name	Type	Default	Description
copy*	string
headline	string
link	{ href: string, text: string, LinkRouter, linkRouterProps }
toast	bool

Figma

Variants

Headline

Loading...

<Toast toast copy="Shoping Smartphones?" headline="headline here" />

<Toast toast copy="Shoping Smartphones?" headline="headline here" />

Link

Loading...

<Toast toast copy="Shoping Smartphones?" link={{ href: '#', text: 'click me' }} />

<Toast toast copy="Shoping Smartphones?" link={{ href: '#', text: 'click me' }} />

Headline and Link

Loading...

<Toast toast copy="Shoping Smartphones?" headline="headline here" link={{ href: '#', text: 'click me' }} />

<Toast
  toast
  copy="Shoping Smartphones?"
  headline="headline here"
  link={{ href: '#', text: 'click me' }}
/>

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support