Display

Badge

Status chip with dot variant and semantic colour tokens.

Visual Variants

Supports multiple semantic variants and styles like ghost and outline for different levels of emphasis.

PrimarySecondarySuccessDangerWarningGhostOutline

'use client'

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

export default function Variants() {
  return (
    <Stack gap={8} wrap>
      <Badge variant="primary">Primary</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="danger">Danger</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="ghost">Ghost</Badge>
      <Badge variant="outline">Outline</Badge>
    </Stack>
  )
}

Status Indicators

Use the dot prop for status indicators. Pulse adds an attention-grabbing animation.

System LiveAPI DownMaintenance

'use client'

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

export default function StatusBadges() {
  return (
    <Stack gap={12}>
      <Badge dot variant="success" pulse>System Live</Badge>
      <Badge dot variant="danger" pulse>API Down</Badge>
      <Badge dot variant="warning">Maintenance</Badge>
    </Stack>
  )
}

Interactive & Removable

Badges can act as filters (interactive) or as dismissible tags (onRemove).

OnlineCritical

AppleMinimalNative

'use client'

import { Badge, Stack } from 'biibaos'
import { useState } from 'react'

export default function TagManager() {
  const [tags, setTags] = useState(['Apple', 'Minimal', 'Native'])
  
  return (
    <Stack direction="column" gap={24}>
      <Stack direction="row" gap={12}>
        <Badge dot variant="success" pulse>Online</Badge>
        <Badge dot variant="danger" pulse>Critical</Badge>
      </Stack>

      <Stack direction="row" gap={8} wrap>
        {tags.map(tag => (
          <Badge 
            key={tag} 
            pill 
            onRemove={() => setTags(t => t.filter(x => x !== tag))}
          >
            {tag}
          </Badge>
        ))}
      </Stack>
    </Stack>
  )
}

Properties

Prop	Type	Default	Description
`variant`	`BiibaVariant \| 'ghost' \| 'outline'`	'secondary'	Semantic design theme variant
`size`	`'xs' \| 'sm' \| 'md'`	'sm'	Predefined size scaling preset
`dot`	`boolean`	—	Renders a small status dot before children
`leftIcon`	`React.ReactNode`	—	Icon before the label
`rightIcon`	`React.ReactNode`	—	Icon after the label
`pill`	`boolean`	—	Makes the badge fully rounded (pill)
`pulse`	`boolean`	—	Adds a subtle pulse animation (works best with dot)
`onRemove`	`() => void`	—	Dismiss / close callback — renders an × button
`children`	`React.ReactNode`	—	Main descriptive text or overlay children layout
`onClick`	`() => void`	—	Click event callback handler
`interactive`	`boolean`	—	Render as interactive chip

Text

Accordion