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
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
      • Caption
      • Type
      • Size
    • Configuration
    • API
      • StatusIndicator

    Status indicator

    The Status indicator provides a consistent, accessible representation of a user’s current status.

    Table of Contents
    • How to use it
      • Default
      • Caption
      • Type
      • Size
    • Configuration
    • API
      • StatusIndicator
    Used for this
    • To display contextual information for a user’s current status
    Not for this
    • To communicate all other statuses, use a Tag

    How to use it

    Default

    The typical usage of a Status indicator component.

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

    Caption

    Status indicators include a custom or no caption.

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

    Type

    There are 4 types of Status indicators: available, away, transfers only, and offline.

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

    Size

    Status indicators come in two sizes: default and compact.

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

    Configuration

    • Name9.4.0•View source•View on npm
    • Installnpm install @zendeskgarden/react-avatars
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { StatusIndicator } from '@zendeskgarden/react-avatars'

    API

    The Status indicator component follows this structure:

    <StatusIndicator>  {/* Status text */}</StatusIndicator>

    StatusIndicator

    Extends HTMLAttributes<HTMLElement>

    Provide an aria-label to ensure it is accessible.

    Prop nameTypeDefaultDescription
    isCompact
    		boolean

    Applies compact styling

    type
    		'available' | 'away' | 'transfers' | 'offline'
    'offline'

    Applies status type for styling and default aria-label

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