Flip Button

A 3D flip button that reveals alternate content on the back face.

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 { ButtonWithFlip } from '@/components/component-kit/items/button-with-flip';
2
3export function Example() {
4  return (
5    <ButtonWithFlip backContent="Let’s go" trigger="click">Flip the script</ButtonWithFlip>
6  );
7}

Props

Flip Button properties
Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`default`	Pill height: 28, 32 or 36px.
`backContent`	`ReactNode`	`—`	Content on the back face.
`trigger`	`"click" \| "hover-focus"`	`click`	Choose how the button flips.

Usage

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

example.tsx

1import { ButtonWithFlip } from '@/components/component-kit/items/button-with-flip';
2
3export function Example() {
4  return (
5    <ButtonWithFlip backContent="Let’s go" trigger="click">Flip the script</ButtonWithFlip>
6  );
7}

Prop

Type

Default

Description

size

"sm" | "default" | "lg"

default

Pill height: 28, 32 or 36px.

backContent

ReactNode

—

Content on the back face.

trigger

"click" | "hover-focus"

click

Choose how the button flips.

Usage

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

example.tsx

1import { ButtonWithFlip } from '@/components/component-kit/items/button-with-flip';
2
3export function Example() {
4  return (
5    <ButtonWithFlip backContent="Let’s go" trigger="click">Flip the script</ButtonWithFlip>
6  );
7}

Prop

Type

Default

Description

size

"sm" | "default" | "lg"

default

Pill height: 28, 32 or 36px.

backContent

ReactNode

—

Content on the back face.

trigger

"click" | "hover-focus"

click

Choose how the button flips.

Flip Button

A 3D flip button that reveals alternate content on the back face.

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 { ButtonWithFlip } from '@/components/component-kit/items/button-with-flip';
2
3export function Example() {
4  return (
5    <ButtonWithFlip backContent="Let’s go" trigger="click">Flip the script</ButtonWithFlip>
6  );
7}

Props

Flip Button properties
Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`default`	Pill height: 28, 32 or 36px.
`backContent`	`ReactNode`	`—`	Content on the back face.
`trigger`	`"click" \| "hover-focus"`	`click`	Choose how the button flips.