Located at the bottom right of an avatar, the presence indicator displays a user's current availability. At a glance, check if a user is available, on a call, in a meeting, away, set to Do Not Disturb, or offline. Most states are inferred automatically from user activity; Do Not Disturb is a state the user explicitly opts into.
By default, the dot contains a state-specific glyph so state isn't conveyed by color alone: a checkmark for active, a minus dash for busy and dnd. Consumers who want a dot-only treatment can opt out with :show-icon="false". The away and offline states do not render a glyph.
When a user is available.
<dt-presence presence="active" />When a user is unavailable due to being 'On a call' or 'In a meeting'. Additionally, a text label indicating their specific status will appear under the user's name.
<dt-presence presence="busy" />When a user has explicitly silenced themselves. The dot uses a border-only treatment in the unavailable color with a minus dash glyph.
<dt-presence presence="dnd" />When a user has a scheduled meeting on their synced calendar (Google G Suite or Microsoft Office 365) and is not actively participating in it through the app. Additionally, 'In a meeting' will appear under the user's name.
<dt-presence presence="away" />When a user has not logged in for their first time.
<dt-presence presence="offline" />Pass :show-icon="false" for a dot-only treatment across all states. The offline state never renders a glyph regardless of showIcon.
<dt-presence presence="active" :show-icon="false" /> <dt-presence presence="away" :show-icon="false" /> <dt-presence presence="busy" :show-icon="false" /> <dt-presence presence="dnd" :show-icon="false" /> <dt-presence presence="offline" :show-icon="false" />
You may wish to announce any live changes to this component via the screen reader since this is only a visual indicator.
If you'd like for a screen reader to read out any changes to Presence, you should pass the srText prop so it is
read by AT and set the aria-live attribute to either 'polite' or 'assertive'.
Even though the component has a role of "status" to assist SR apps in reading out status changes, its default
'aria-live' value is set to 'off'.
See W3C guidelines for more information.
Example:
<dt-presence
presence="active"
sr-text="User {{ user }} is active"
/>Abbreviations / symbols should be read out in full for voiceover / screen readers.
import { DtPresence } from '@dialpad/dialtone-vue';
Name
|
Default
|
Type
|
|---|---|---|
presence | active |
"busy"
|
"away"
|
"active"
|
"offline"
|
"dnd"
Determines the color of the inner presence circle, indicating status.
Accepts one of 5 values: 'busy', 'away', 'active', 'offline', 'dnd' |
showIcon | true | boolean Renders a state-specific glyph inside the colored circle to reinforce meaning beyond color.
Active shows a checkmark; busy and dnd show a minus dash. The |
srText | null | string Since Presence is a visual element, we need SRs to read out any state changes
that occur.
Text entered here will be read by assistive technology. If null this component will be ignored by AT. |
Class
|
Applies to
|
Description
|
|---|
Presence documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope