Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
        • Alerts
        • Global alert
        • Notifications
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
      • Placement
      • Type
    • Configuration
    • API
      • Notification
      • ToastProvider

    Notifications

    A Notification is a passive status update that keeps users informed of system progress.


    Table of Contents
    • How to use it
      • Default
      • Placement
      • Type
    • Configuration
    • API
      • Notification
      • ToastProvider

    Used for this
    • For a passive status update about user or system activity
    Not for this
    • For contextual feedback that may require action or decision, use an Alert instead

    How to use it

    Default

    The typical usage of a Notification component.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Placement

    There are 6 placement options available. The Notification occupies the top-end position by default.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Type

    Types indicate what kind of message is in the notification and help the user understand how to respond. They can be info, warning, error, or success.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.5.3•View source•View on npm
    • Installnpm install @zendeskgarden/react-notifications
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Notification, ToastProvider } from '@zendeskgarden/react-notifications'

    API

    Notification

    Prop nameTypeDefaultDescription
    type
    'success' | 'warning' | 'error' | 'info'

    Applies notification type styles

    Notification.Close

    Extends ButtonHTMLAttributes<HTMLButtonElement>

    Notification.Paragraph

    Extends HTMLAttributes<HTMLParagraphElement>

    Notification.Title

    Extends HTMLAttributes<HTMLDivElement>

    Prop nameTypeDefaultDescription
    isRegular
    boolean

    Applies regular (non-bold) font weight

    ToastProvider

    Prop nameTypeDefaultDescription
    limit
    number
    4

    Limits the number of visible toasts

    placementProps
    Partial<Record<'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end', HTMLAttributes<HTMLDivElement>>>
    {}

    Passes placement-based customization props to the toast's parent element

    zIndex
    number

    Sets the z-index of the toast

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2025