RefreshButton

import { RefreshButton } from "@cloudflare/kumo";

/** Idle and loading states side by side. */
export function RefreshButtonBasicDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <RefreshButton />
      <RefreshButton loading />
    </div>
  );
}

Installation

Barrel

import { RefreshButton } from "@cloudflare/kumo";

Granular

import { RefreshButton } from "@cloudflare/kumo/components/button";

RefreshButton is a thin wrapper around Button that pins shape="square", ships the rotating arrows icon, and supplies a sensible default aria-label of "Refresh". It also animates the icon while loading is true.

import { RefreshButton } from "@cloudflare/kumo";

export default function Example() {
  return <RefreshButton onClick={refetch} loading={isFetching} />;
}

The loading prop only spins the refresh icon — it intentionally does not swap in the standard Button loader, which would replace the refresh affordance.

Examples

Loading State

import { useState } from "react";
import { RefreshButton } from "@cloudflare/kumo";

/** Click to toggle the loading state for ~1s. */
export function RefreshButtonInteractiveDemo() {
  const [loading, setLoading] = useState(false);
  return (
    <RefreshButton
      loading={loading}
      onClick={() => {
        setLoading(true);
        setTimeout(() => setLoading(false), 1000);
      }}
    />
  );
}

Sizes

Sizes follow Button’s size prop — xs, sm, base, lg — and the refresh icon scales accordingly.

import { RefreshButton } from "@cloudflare/kumo";

/** Sizes track Button's size prop. */
export function RefreshButtonSizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <RefreshButton size="xs" />
      <RefreshButton size="sm" />
      <RefreshButton size="base" />
      <RefreshButton size="lg" />
    </div>
  );
}

Accessible Label

Override aria-label whenever the refresh action targets a specific dataset. Defaults to "Refresh".

import { RefreshButton } from "@cloudflare/kumo";

/** Override `aria-label` for localised contexts. */
export function RefreshButtonAriaLabelDemo() {
  return <RefreshButton aria-label="Reload analytics" />;
}

API Reference

Prop	Type	Default	Description
loading	`boolean`	-	Shows the refresh icon spinning and disables interaction.
className	`string`	-	-
title	`string`	-	-
shape	`"base" \| "square" \| "circle"`	`"base"`	Button shape. - `"base"` — Default rectangular button - `"square"` — Square button for icon-only actions - `"circle"` — Circular button for icon-only actions
size	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	Button size. - `"xs"` — Extra small for compact UIs - `"sm"` — Small for secondary actions - `"base"` — Default size - `"lg"` — Large for primary CTAs
variant	`"primary" \| "secondary" \| "ghost" \| "destructive" \| "secondary-destructive" \| "outline"`	`"secondary"`	Visual style of the button. - `"primary"` — High-emphasis, brand-colored for primary actions - `"secondary"` — Default style with border for most actions - `"ghost"` — Minimal, no background for tertiary actions - `"destructive"` — Danger button for destructive actions - `"secondary-destructive"` — Secondary style with destructive text - `"outline"` — Bordered with transparent background
disabled	`boolean`	-	-
name	`string`	-	-
type	`"submit" \| "reset" \| "button"`	-	-
value	`string \| string[] \| number`	-	-
id	`string`	-	-
lang	`string`	-	-
children	`ReactNode`	-	-

Kumo