SlideButton

Pill call-to-action whose icon disc slides across the button on hover while the label shifts and the disc rolls a full turn.

Status: stable. Group: actions. Markdown version: /design-system/components/slide-button.md

When to use

SlideButton is a focal pill call-to-action for a single, high-value destination. On hover its icon disc slides across the pill, the label shifts to make room, and the disc rolls a full turn. It renders a real anchor, so it is keyboard-reachable and activates like any link; all motion is suppressed under prefers-reduced-motion.

When not to use

Do not rely on the slide or roll to communicate anything -- both are suppressed under reduced motion, so the label must stand alone.
Do not use it for form submission or in-page actions; reach for Button there.
Do not place more than one per view. It is a focal CTA, not a repeated control.
Do not use it for form submission or in-page actions; use Button, which renders a real button.

Look-alikes

Button: Do not use it for form submission or in-page actions; use Button, which renders a real button.

Props

SlideButton props
Prop	Type	Default	Description	Required
`label`	`string`	none	Visible, i18n-resolved label. Names the destination, not the gesture.	Yes
`href`	`string`	none	Destination. Rendered as a real `<a>`, so it is focusable and keyboard-activated.	Yes
`icon`	`string`	`Lightning`	Phosphor icon name for the sliding disc.	No
`iconSide`	`"left" \| "right"`	`left`	Side the icon rests on before it slides across on hover. "left" starts at the leading edge and travels to the trailing edge; "right" is the mirror.	No

Variants

Allowed iconSide values: left, right (default left).

Invalid combinations

The contract records no invalid combinations.

Keyboard

SlideButton keyboard behaviour
Key	Behaviour
Enter	Activates the focused control. (standard)
Tab	Moves focus to the control and on to the next focusable element. (standard)

Rows marked (standard) name a key the contract lists without a description; the behaviour shown is the usual one for that key.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

SlideButton rules
Level	Rule	How it is checked
MUST	ARIA: Renders a real <a href>, so it is focusable and keyboard-activated.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The visible label is the accessible name; the icon disc is aria-hidden and decorative.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	Positional, scale, and opacity motion is suppressed under prefers-reduced-motion.	Manual review, last on 2026-11-04. WCAG 2.2.2, 2.3.3.
MUST	Every documented keyboard interaction works as specified.	Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
SHOULD	Use it for one focal call-to-action per view, such as the primary next step at the end of a landing section.	Not stated in the contract.
SHOULD	Write a label that names the destination, like See the work or Start your sprint, never Click here.	Not stated in the contract.
SHOULD	Pick an icon that reinforces the destination; it is decorative and aria-hidden, so it must not be the only thing carrying meaning.	Not stated in the contract.
SHOULD	Forward data-* hooks (for example data-donny-interest) through the spread anchor props when a surface needs them.	Not stated in the contract.
SHOULD NOT	Do not rely on the slide or roll to communicate anything; both are dropped under reduced motion, so the label must stand alone.	Not stated in the contract.
SHOULD NOT	Do not place more than one per view; it is a focal control, not a repeated action.	Not stated in the contract.

Install and import

Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
Import: import { SlideButton } from "@digitaltableteur/react";
Entry point: @digitaltableteur/react/actions exports it too.
Styles: import @digitaltableteur/react/style.css once at the app boundary.
Also available as the custom element <dt-slide-button>; see the custom elements manifest.