Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Thinking
  • Typing
  • Recommendations
  • Usage boundaries
  • API reference

Feedback

Spinner

Shows that work is in progress: thinking, running, or typing a reply.

idle

Usage

import { Spinner } from "@mizen-labs/ui";

Examples

Thinking

Dots slide through a grid, one at a time, while the model reasons.

Typing

Three dots rise in turn while a reply is being written.

Recommendations

GuidancePractice
Do

Place loading feedback beside the operation and explain what is pending.

Usage boundaries

GuidanceBoundary
Scope

Use Button loading for button actions and Progress for measurable completion. A spinner does not announce the operation by itself.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
SpinnerSpinnerProps—Renders an SVG status sized to the surrounding text.
variant"dots" | "thinking" | "typing""dots"thinking slides dots through a grid while the model reasons. dots rotates while work runs and matches Button's loading glyph. typing raises three dots in turn while a reply is being written.
aria-labelstring"Loading", "Thinking", or "Typing"Names what is happening, such as Thinking. Set aria-hidden instead when visible text beside the spinner already says it.
PreviousSkeletonNextStatus dot

Synchronizing workspace