Reveal

import { AgentAvatar, Icon, Reveal } from "@arcadia/ui";

<Reveal render={<button type="button" onClick={open} {...sx("cmp-reveal-pill", styles.pill)} />} end={<Icon name="chevron-right" size="text" />}>
  <AgentAvatar avatar={JUNIPER} name="Juniper" size={24} aria-hidden />
  Juniper
</Reveal>

TSX

import { Icon, Reveal } from "@arcadia/ui";

<Reveal render={<button type="button" onClick={open} />} end={<Icon name="chevron-right" size="text" />}>
  Juniper
</Reveal>

A trailing affordance that slides in when its host is under the pointer or holds keyboard focus: the chevron of a pill that opens a pane, the pencil beside a title that can be renamed. The root is the host, a span or the element render gives it; end is the part that appears, sliding --reveal-offset into place as it fades in. Its room is always kept, so the content never shifts.

Set shown while what it opens is open, so the affordance stays in view with the pointer elsewhere.

Examples

A title's pencil

pace="slow" for a hint rather than a control under the pointer. Focus inside the host shows it too, so Tab reaches the button.

Morning summary

import { IconButton, Reveal } from "@arcadia/ui";

<Reveal pace="slow" end={<IconButton icon="pencil" label="Rename" size="xs" tone="muted" onClick={open} />}>
  <h3 {...sx("cmp-reveal-title", styles.title)}>Morning summary</h3>
</Reveal>

The revealed part stays in the tab order and the accessibility tree while hidden: keyboard focus on the host or inside it brings it into view, so a control in end is never reachable only by the pointer. A decorative glyph in end is hidden from assistive tech by the Icon itself. Reduced motion keeps the fade and drops the slide.

endrequired: ReactNode; The affordance that slides in after the content: a chevron on a pill that opens something, a title's pencil.
shown: booleanDefault false; Keep it in view whatever the pointer does: what it opens is open.
pace: "fast" | "slow"Default "fast"; fast: a control under the pointer. slow: a title that only hints it can be edited.
rootStyle: RootStyle; Typed StyleX override: where it sits.
render: ReactElement | (props, state) => ReactElement; Replace the rendered element, e.g. render={<a href="/settings" />}.

Rest props go to <span> props and render.

Usage

Examples

A title's pencil

Morning summary

Accessibility

API reference

Reveal