Reveal Button

A button that opens an arrow beside its label when you hover or focus it, to suggest "go". Only a transition, so there is nothing to pause. Builds on Button.

Motionv0.1.0experimentalWCAG 2.2 AAView spec

Optional, and kept apart.

Nothing here is included in a project unless you add it, and the plain component it builds on is unchanged. This effect is decoration: it is hidden from screen readers, stands still for visitors who prefer reduced motion, and can be paused. Use Still on a preview to see that version.

import { RevealButton } from "@rdloom/react";

export default function RevealButtonBasicExample() {
  return (
    <RevealButton>Read more</RevealButton>
  );
}

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add reveal-button

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/reveal-button.json

Works, but without upgrade tracking.

Usage

import { RevealButton } from "@rdloom/react";

<RevealButton>Read more</RevealButton>

Variants

import { RevealButton } from "@rdloom/react";

export default function RevealButtonVariantsExample() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <RevealButton>Continue</RevealButton>
      <RevealButton variant="secondary">View all</RevealButton>
      <RevealButton variant="ghost">Next step</RevealButton>
    </div>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`children`required Button label. Icon-only buttons must pass aria-label instead.	`node`	none
`variant` Visual emphasis, as on Button.	`"primary" \| "secondary" \| "ghost" \| "danger"`	`"primary"`
`size` Height, padding and font size, as on Button.	`"sm" \| "md" \| "lg"`	`"md"`
`isDisabled` Prevents interaction and dims the button.	`boolean`	`false`
`isLoading` Shows a spinner and blocks presses; the pending state is announced.	`boolean`	`false`
`onPress` Called when the button is pressed by mouse, touch or keyboard.	`() => void`	none

Accessibility

Role button, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Tab focuses it
Enter or Space presses it

Screen readers announce

Announced exactly as a Button: its label, as a button; the effect adds nothing to what is read

What your code must do

Decoration only: the animated layers are hidden from assistive technology and never take focus
Stands still for visitors who ask for less motion (prefers-reduced-motion), and the effect can also be shown still with the rdm-still class
The arrow appears on keyboard focus as well as hover, and is decorative
The transition is switched off for reduced motion, leaving the arrow in its final state only on hover or focus
Does not flash: nothing changes more than three times in a second (WCAG 2.3.1)
Optional: it is a separate component, so projects that do not add it carry none of its code

Guidelines

Use it when

Buttons that lead somewhere: Read more, Continue, View all

Avoid it when

Destructive actions

Don't

Relying on the arrow alone to say where it goes

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-action-primary
--rd-color-action-on-primary
--rd-color-action-danger
--rd-color-surface-default
--rd-color-text-default
--rd-color-border-default
--rd-color-focus-ring
--rd-radius-control