A visual control element indicating the current status of a user.
Preview
Usage
Located at the bottom right of an avatar, the presence indicator displays a user's current availablity. At a glance, check if a user is available, in a meeting, on a call, away, offline, or set to 'Do Not Disturb'. It's important to note that this indicator is automatically set and cannot be changed manually by the user.
Variants and Examples
Active
When a user is available.
Busy
When a user is unavailable, either due to being 'On a call', 'In a meeting', or set to 'DND (Do Not Disturb)'. Additionally, a text label indicating their specific status will appear under the user's name.
Away
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.
Offline
When a user has not logged in for their first time.
Vue API
Props
Classes
Accessibility
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.