Presence

Stable
WCAG 2.2 evidence
RTL

Availability dot of a person. Used on its own, or in the presence slot of Avatar, which sizes it. The status is never conveyed by colour alone to assistive technology: the dot carries visually hidden status text (WCAG 1.1.1, 1.3.1). Consumer duty (WCAG 1.4.1): the four Figma statuses differ only by fill colour, so show the status as visible text somewhere sighted users can reach it (a name line, a tooltip, a profile card) wherever it matters. Presentational: renders in React Server Components.

import { Presence } from "@nexera-ui/react";

Loading example…

3
examples: 3
props: 3
live controls: 1
platform: 4
WCAG criteria: 5
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

status

label

isDecorativefalse

Generated code

import { Presence } from "@nexera-ui/react";

<Presence />

Examples 2

The same examples as Storybook, rendered live. Open Code to copy one.

Statuses

Every Figma Status, laid out like the Figma canvas. Each dot is followed by its status as visible text, which is how the status stays readable without colour (WCAG 1.4.1); the dots are then decorative.

Loading example…

app.tsx

import { Presence } from "@nexera-ui/react";

const statuses = ["online", "away", "busy", "offline"] as const;

export function Statuses() {
  return (
    <ul className="m-0 flex list-none flex-wrap items-center gap-6 p-0">
      {statuses.map((status) => (
        <li key={status} className="text-body-small text-secondary flex items-center gap-2">
          <Presence status={status} isDecorative />
          <span className="capitalize">{status}</span>
        </li>
      ))}
    </ul>
  );
}

On surfaces

The 2 px bg/surface stroke separates the dot from what it overlaps (page, sunken and brand fills).

Loading example…

app.tsx

import { Presence } from "@nexera-ui/react";

const statuses = ["online", "away", "busy", "offline"] as const;

export function OnSurfaces() {
  return (
    <div className="flex flex-wrap gap-4">
      {["bg-surface", "bg-page", "bg-sunken", "bg-brand-primary"].map((surface) => (
        <div key={surface} className={`flex items-center gap-3 rounded-md p-4 ${surface}`}>
          {statuses.map((status) => (
            <Presence key={status} status={status} />
          ))}
        </div>
      ))}
    </div>
  );
}

Props 3

Press "Try it" on a card to load that prop into the playground.

statusNexera

"online" | "away" | "busy" | "offline"

Availability: online (success fill), away (warning), busy (danger) or offline (disabled grey).

labelNexera

string

Status text for assistive technology, rendered as visually hidden text so it is announced (and machine-translated) with the surrounding content. Translate it for your locale. Not allowed on a decorative dot.

isDecorativeNexera

boolean

Hide the dot from assistive technology. Only when the same status is already written as visible text next to it. Hide the dot from assistive technology (aria-hidden), because the status is written as visible text next to it.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

3 direct · 1 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.4.11Non-text ContrastLevel AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<Presence className="shadow-sm" />

Theme studio

Presence

Try every prop. Copy the code.

Examples 2

Statuses

On surfaces

Props 3

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components