Table of Contents
Status indicator
The Status indicator provides a consistent, accessible representation of a user’s current status.
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.
Caption
Status indicators include a custom or no caption.
Type
There are 4 types of Status indicators: available, away, transfers only, and offline.
Size
Status indicators come in two sizes: default and compact.
Configuration
- Name9.0.0-next.26•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 name | Type | Default | Description |
|---|---|---|---|
isCompact | boolean | Applies compact styling | |
type | 'available' | 'away' | 'transfers' | 'offline' | 'offline' | Applies status type for styling and default aria-label |