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';
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>
);
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" />
</>
);
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>
type
'available' | 'away' | 'transfers' | 'offline'
required
Determines the icon and color used to represent the status.
Accessible label for the status indicator. Required for screen reader support.
Renders the indicator in a smaller, compact size.