Feedback

Toast

Toast components deliver brief,   non-intrusive notifications, providing quick updates and enhancing the user experience with smooth, unobtrusive interactions.

View Figma UI Kit

View GitHub repo

WCAG 2.1 accessibility compliant

With Border

Heading

Label

This is some body copy

Heading

Label

This is some body copy

Heading

Label

This is some body copy

Heading

Label

This is some body copy

Heading

Label

This is some body copy

No Border

Heading

Label

This is some body copy

Heading

Label

This is some body copy

Heading

Label

This is some body copy

Heading

Label

This is some body copy

Heading

Label

This is some body copy

React Native

 <Toast.Root
  type='foreground'
  open={open}
  onOpenChange={setOpen}
  className='opacity-95 bg-secondary border-border flex-row justify-between items-center p-4 rounded-xl'
  accessibilityRole="status"
  accessibilityLiveRegion="polite"
  accessibilityLabel="Notification"
  importantForAccessibility="yes"
>
  <View className='gap-1.5'>
    <Toast.Title 
      className='text-foreground text-3xl'
      accessibilityRole="header"
      nativeID="toast-title"
    >
      Here is a toast
    </Toast.Title>
    <Toast.Description 
      className='text-foreground text-lg'
      accessibilityRole="text"
      nativeID="toast-description"
    >
      It will disappear in {seconds} seconds
    </Toast.Description>
  </View>
  <View className='gap-2'>
    <Toast.Action 
      className='border border-primary px-4 py-2'
      accessibilityRole="button"
      accessibilityLabel="Action"
      accessibilityHint="Performs the toast action"
    >
      <Text className='text-foreground'>Action</Text>
    </Toast.Action>
    <Toast.Close 
      className='border border-primary px-4 py-2'
      accessibilityRole="button"
      accessibilityLabel="Close"
      accessibilityHint="Dismisses the notification"
    >
      <Text className='text-foreground'>Close</Text>
    </Toast.Close>
  </View>
</Toast.Root>

WCAG 2.1 accessibility checks

1.3.1 Info and Relationships (Level A)

1.4.3 Contrast (Minimum) (Level AA)

2.4.6 Headings and Labels (Level AA)

4.1.2 Name, Role, Value (Level A)

4.1.3 Status Messages (Level AA)

Dialog

Tooltip