Mischief

07 / Actions

Shift Button

A call to action that trades its leading icon for a directional cue when someone approaches it.

Live previewSource

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function DownloadButton() {
  return (
    <ShiftButton
      render={<a href="/download" />}
      leadingIcon={<Apple aria-hidden="true" />}
    >
      Download for Mac
    </ShiftButton>
  )
}

API

childrenReactNodeThe button or link label.
leadingIconReactNodeThe icon visible at rest.
trailingIconReactNodeThe arriving icon. Defaults to an arrow.
renderReactElementRenders another element, such as a link.
classNamestringClasses for the root element.

Accessibility

Base UI preserves native button behavior and supports rendering a real link for navigation. The label never disappears, focus remains visible, and reduced motion keeps both the leading icon and text still.

Dependencies

@base-ui/react, lucide-react, clsx, tailwind-merge