Feedback

Spinner

Loading spinner in all sizes with semantic colour variants.

Loading Indicators

Smooth, physics-based spinners for loading states. They automatically inherit the current text color if no variant is specified.

'use client'

import React from 'react'
import { Spinner, Stack } from 'biibaos'

export default function SpinnerSizes() {
  return (
    <Stack gap={20} align="center" wrap>
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
    </Stack>
  )
}

Themed Colors

Use semantic variants to match the context of the loading action.

'use client'

import React from 'react'
import { Spinner, Stack } from 'biibaos'

export default function SpinnerVariants() {
  return (
    <Stack gap={20} wrap>
      <Spinner variant="primary" />
      <Spinner variant="success" />
      <Spinner variant="danger" />
      <Spinner variant="warning" />
    </Stack>
  )
}

With Descriptive Text

Add visible labels to provide more context to the user.

Fetching updates...Securely authenticating...

'use client'

import React from 'react'
import { Spinner, Stack } from 'biibaos'

export default function SpinnerLabels() {
  return (
    <Stack gap={20} direction="column">
      <Spinner showLabel label="Fetching updates..." />
      <Spinner showLabel variant="primary" label="Securely authenticating..." size="sm" />
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`size`	`BiibaSize`	'sm'	Predefined size scaling preset
`variant`	`'default' \| 'primary' \| 'danger' \| 'success' \| 'warning'`	'secondary'	Semantic design theme variant
`label`	`string`	—	Accessible loading label
`showLabel`	`boolean`	—	Show label text visually next to spinner

Divider

Skeleton