Arrow Roll Button

A bespoke studio CTA button featuring rolling text-shadow and dual-arrow sliding transitions on hover.

Tweak Props

children

variant

size

arrow-roll-button.tsx

Loading code…

Arrow Roll Button interactive preview in studio variants.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/buttons/arrow-roll-button.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

arrow-roll-button.tsx

Usage

import { ArrowRollButton } from "@/components/sora-ui/buttons/arrow-roll-button";

export function Example() {
  return (
    <ArrowRollButton href="/contact" size="large" variant="light">
      Start a project
    </ArrowRollButton>
  );
}

Props

Prop	Type	Default
`children?`	`ReactNode`	`"Start a project"`
`variant?`	`"light" \| "dark" \| "white" \| "outline"`	`"light"`
`size?`	`"default" \| "large"`	`"default"`
`href?`	`string`	-
`className?`	`string`	-

Tweak Props

children

variant

size

arrow-roll-button.tsx

Loading code…

Arrow Roll Button interactive preview in studio variants.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/buttons/arrow-roll-button.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

arrow-roll-button.tsx

Usage

import { ArrowRollButton } from "@/components/sora-ui/buttons/arrow-roll-button";

export function Example() {
  return (
    <ArrowRollButton href="/contact" size="large" variant="light">
      Start a project
    </ArrowRollButton>
  );
}

Props

Prop	Type	Default
`children?`	`ReactNode`	`"Start a project"`
`variant?`	`"light" \| "dark" \| "white" \| "outline"`	`"light"`
`size?`	`"default" \| "large"`	`"default"`
`href?`	`string`	-
`className?`	`string`	-

Arrow Roll Button

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Props

On this page

Arrow Roll Button

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Props

On this page