Slide Text Button

A modern button that reveals alternate text by sliding on hover with smooth blur transitions.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { ButtonWithSlideText } from '@/components/component-kit/items/button-with-slide-text';
2
3export function Example() {
4  return (
5    <ButtonWithSlideText primaryText="Start building" secondaryText="Your next big idea" />
6  );
7}

Props

Slide Text Button properties
Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`default`	Pill height: 28, 32 or 36px.
`primaryText`	`string`	`—`	Default button label.
`secondaryText`	`string`	`—`	Label revealed on hover and focus.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { ButtonWithSlideText } from '@/components/component-kit/items/button-with-slide-text';
2
3export function Example() {
4  return (
5    <ButtonWithSlideText primaryText="Start building" secondaryText="Your next big idea" />
6  );
7}

Prop

Type

Default

Description

size

"sm" | "default" | "lg"

default

Pill height: 28, 32 or 36px.

primaryText

string

—

Default button label.

secondaryText

string

—

Label revealed on hover and focus.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { ButtonWithSlideText } from '@/components/component-kit/items/button-with-slide-text';
2
3export function Example() {
4  return (
5    <ButtonWithSlideText primaryText="Start building" secondaryText="Your next big idea" />
6  );
7}

Prop

Type

Default

Description

size

"sm" | "default" | "lg"

default

Pill height: 28, 32 or 36px.

primaryText

string

—

Default button label.

secondaryText

string

—

Label revealed on hover and focus.

Slide Text Button

A modern button that reveals alternate text by sliding on hover with smooth blur transitions.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { ButtonWithSlideText } from '@/components/component-kit/items/button-with-slide-text';
2
3export function Example() {
4  return (
5    <ButtonWithSlideText primaryText="Start building" secondaryText="Your next big idea" />
6  );
7}

Props

Slide Text Button properties
Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`default`	Pill height: 28, 32 or 36px.
`primaryText`	`string`	`—`	Default button label.
`secondaryText`	`string`	`—`	Label revealed on hover and focus.