Spinner

Processing payment...

$100.00

import {
  Item,
  ItemContent,
  ItemMedia,
  ItemTitle,

Usage

import { Spinner } from "uilab-core"

<Spinner />

Examples

Sizes

Use the size-* utility class to change the size of the spinner.

import { Spinner } from "uilab-core"

export function SpinnerSizesExample() {
  return (
    <div className="flex items-center gap-6">

Add a spinner to a button to indicate a loading state. Remember to use the data-icon="inline-start" prop to add the spinner to the start of the button and the data-icon="inline-end" prop to add the spinner to the end of the button.

import { Button, Spinner } from "uilab-core"

export function SpinnerButtonExample() {
  return (
    <div className="flex flex-col items-center gap-4">

Badge

Add a spinner to a badge to indicate a loading state. Remember to use the data-icon="inline-start" prop to add the spinner to the start of the badge and the data-icon="inline-end" prop to add the spinner to the end of the badge.

SyncingUpdatingProcessing

import { Badge, Spinner } from "uilab-core"

export function SpinnerBadgeExample() {
  return (
    <div className="flex items-center gap-4 [--radius:1.2rem]">

Input Group

Validating...

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,

Empty

Processing your request

Please wait while we process your request. Do not refresh the page.

import {
  Button,
  Empty,
  EmptyContent,
  EmptyDescription,

Spinner

UsageCopy Anchor Link

ExamplesCopy Anchor Link

SizesCopy Anchor Link

ButtonCopy Anchor Link

BadgeCopy Anchor Link

Input GroupCopy Anchor Link

EmptyCopy Anchor Link