Caroa UI

Spinner

ローディング状態を表示するスピナーコンポーネント。

インポート

import { Spinner } from '@caroainc/ui-components/client'

個別サブパス(バンドルサイズを抑えたい場合):

import { Spinner } from '@caroainc/ui-components/spinner'

基本的な使い方

読み込み中
<Spinner />

サイズ

Loading...
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="default" />
<Spinner size="lg" />
<Spinner size="xl" />

ラベル(アクセシビリティ)

role="status"aria-label にはデフォルトで '読み込み中' が使われ、sr-only テキストとしても出力されます。文言を変えたい場合は label を渡します。

送信中
<Spinner label="送信中" />

ボタンと組み合わせ

Loading...
<Button disabled>
  <Spinner size="sm" />
  読み込み中...
</Button>

Props

PropTypeDefaultDescription
size'xs' | 'sm' | 'default' | 'lg' | 'xl''default'スピナーのサイズ
labelstring'読み込み中'アクセシビリティ用のラベル(role="status"のaria-labelとsr-onlyテキストに使用)

On this page