Spinner

"use client"

import {
  Item,
  ItemContent,

Usage

import { Spinner } from "uilab-core"

<Spinner />

Examples

Sizes

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

"use client"

import { Spinner } from "uilab-core"

export function SpinnerSizesExample() {

Button

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.

"use client"

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

export function SpinnerButtonExample() {

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.

"use client"

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

export function SpinnerBadgeExample() {

Input Group

"use client"

import {
  InputGroup,
  InputGroupAddon,

Empty

"use client"

import {
  Button,
  Empty,