Loading Button

A button with a spoked loading spinner whose width flows to fit each state label.

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

1'use client';
2
3import { useState } from 'react';
4import {
5  ButtonWithLoader,
6  type ButtonStateType,
7} from '@/components/component-kit/items/button-with-loader';
8
9export function Example() {
10  const [state, setState] = useState<ButtonStateType>('idle');
11
12  function deploy() {
13    if (state === 'success') {
14      setState('idle');
15      return;
16    }
17    setState('loading');
18    // Replace the timeout with your async work.
19    setTimeout(() => setState('success'), 1200);
20  }
21
22  return (
23    <ButtonWithLoader
24      state={state}
25      labels={{ idle: 'Deploy project', loading: 'Deploying', success: 'Deployed' }}
26      onClick={deploy}
27    />
28  );
29}

Props

Loading Button properties
Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`default`	Pill height: 28, 32 or 36px.
`state`	`"idle" \| "loading" \| "success" \| "error"`	`idle`	Current action state. Set it to "loading" from your click handler.
`labels`	`ButtonStateLabels`	`—`	Override the label for each state.

Usage

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

example.tsx

1'use client';
2
3import { useState } from 'react';
4import {
5  ButtonWithLoader,
6  type ButtonStateType,
7} from '@/components/component-kit/items/button-with-loader';
8
9export function Example() {
10  const [state, setState] = useState<ButtonStateType>('idle');
11
12  function deploy() {
13    if (state === 'success') {
14      setState('idle');
15      return;
16    }
17    setState('loading');
18    // Replace the timeout with your async work.
19    setTimeout(() => setState('success'), 1200);
20  }
21
22  return (
23    <ButtonWithLoader
24      state={state}
25      labels={{ idle: 'Deploy project', loading: 'Deploying', success: 'Deployed' }}
26      onClick={deploy}
27    />
28  );
29}

Prop

Type

Default

Description

size

"sm" | "default" | "lg"

default

Pill height: 28, 32 or 36px.

state

"idle" | "loading" | "success" | "error"

idle

Current action state. Set it to "loading" from your click handler.

labels

ButtonStateLabels

—

Override the label for each state.

Usage

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

example.tsx

1'use client';
2
3import { useState } from 'react';
4import {
5  ButtonWithLoader,
6  type ButtonStateType,
7} from '@/components/component-kit/items/button-with-loader';
8
9export function Example() {
10  const [state, setState] = useState<ButtonStateType>('idle');
11
12  function deploy() {
13    if (state === 'success') {
14      setState('idle');
15      return;
16    }
17    setState('loading');
18    // Replace the timeout with your async work.
19    setTimeout(() => setState('success'), 1200);
20  }
21
22  return (
23    <ButtonWithLoader
24      state={state}
25      labels={{ idle: 'Deploy project', loading: 'Deploying', success: 'Deployed' }}
26      onClick={deploy}
27    />
28  );
29}

Prop

Type

Default

Description

size

"sm" | "default" | "lg"

default

Pill height: 28, 32 or 36px.

state

"idle" | "loading" | "success" | "error"

idle

Current action state. Set it to "loading" from your click handler.

labels

ButtonStateLabels

—

Override the label for each state.

Loading Button

A button with a spoked loading spinner whose width flows to fit each state label.

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

1'use client';
2
3import { useState } from 'react';
4import {
5  ButtonWithLoader,
6  type ButtonStateType,
7} from '@/components/component-kit/items/button-with-loader';
8
9export function Example() {
10  const [state, setState] = useState<ButtonStateType>('idle');
11
12  function deploy() {
13    if (state === 'success') {
14      setState('idle');
15      return;
16    }
17    setState('loading');
18    // Replace the timeout with your async work.
19    setTimeout(() => setState('success'), 1200);
20  }
21
22  return (
23    <ButtonWithLoader
24      state={state}
25      labels={{ idle: 'Deploy project', loading: 'Deploying', success: 'Deployed' }}
26      onClick={deploy}
27    />
28  );
29}

Props

Loading Button properties
Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg"`	`default`	Pill height: 28, 32 or 36px.
`state`	`"idle" \| "loading" \| "success" \| "error"`	`idle`	Current action state. Set it to "loading" from your click handler.
`labels`	`ButtonStateLabels`	`—`	Override the label for each state.