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 { Stack, Spinner } from 'biibaos'

export default function App() {
  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 { Stack, Spinner } from 'biibaos'

export default function App() {
  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 { Stack, Spinner } from 'biibaos'

export default function App() {
  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