Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/zendeskgarden/website/llms.txt

Use this file to discover all available pages before exploring further.

StatusIndicator is part of the @zendeskgarden/react-avatars package. Use it to display contextual information for a user’s presence or availability status.
To communicate other kinds of status (categories, labels, filters), use a Tag instead.

​
Installation

npm install @zendeskgarden/react-avatars

import { StatusIndicator } from '@zendeskgarden/react-avatars';

​
Usage

​
Default

A StatusIndicator renders an icon alongside a label. Always provide an aria-label for accessibility. 
import { StatusIndicator } from '@zendeskgarden/react-avatars';

const Example = () => (
  <StatusIndicator type="offline" aria-label="status: offline">
    Offline
  </StatusIndicator>
);

​
Types

There are four status types: available, away, transfers, and offline. 
import { StatusIndicator } from '@zendeskgarden/react-avatars';

const Example = () => (
  <>
    <StatusIndicator type="available" aria-label="status: available">
      Available
    </StatusIndicator>
    <StatusIndicator type="away" aria-label="status: away">
      Away
    </StatusIndicator>
    <StatusIndicator type="transfers" aria-label="status: transfers only">
      Transfers only
    </StatusIndicator>
    <StatusIndicator type="offline" aria-label="status: offline">
      Offline
    </StatusIndicator>
  </>
);

​
Custom caption

Pass any string as children to use a custom caption, or omit children to show no label at all. 
import { StatusIndicator } from '@zendeskgarden/react-avatars';

const Example = () => (
  <>
    {/* Custom caption */}
    <StatusIndicator type="away" aria-label="status: away">
      Foraging for mushrooms
    </StatusIndicator>

    {/* No caption */}
    <StatusIndicator type="away" aria-label="status: away" />
  </>
);

​
Size

Status indicators come in two sizes: default and compact. 
import { StatusIndicator } from '@zendeskgarden/react-avatars';

const Example = () => (
  <>
    <StatusIndicator type="offline" aria-label="status: offline">
      Offline
    </StatusIndicator>
    <StatusIndicator type="offline" aria-label="status: offline" isCompact>
      Offline
    </StatusIndicator>
  </>
);

​
Component structure

<StatusIndicator type="available" aria-label="status: available">
  {/* Optional label text */}
</StatusIndicator>

​
Props

​
type
'available' | 'away' | 'transfers' | 'offline'
required
Determines the icon and color used to represent the status.
​
aria-label
string
required
Accessible label for the status indicator. Required for screen reader support.
​
isCompact
boolean
default:"false"
Renders the indicator in a smaller, compact size.