DotBadge

A Badge variant with a colored status dot (or custom icon) in the leading section — useful for status indicators like “Live”, “Online”, “Draft”, or category tags.

Import

import { DotBadge } from '@flxui/uikit/business'

Basic Usage

import { DotBadge } from '@flxui/uikit/business'
 
function Demo() {
  return <DotBadge color="success">Active</DotBadge>
}

Pulsing dot

For a “live” or actively-updating status, add pulse for a subtle pulsing animation on the dot:

<DotBadge color="danger" pulse>
  Live
</DotBadge>

Custom icon instead of a dot

Pass icon to render a custom icon in place of the dot — e.g. a platform logo or category icon. It’s sized automatically to match the badge’s size:

import { IconBrandGithub } from '@tabler/icons-react'
 
;<DotBadge color="neutral" icon={<IconBrandGithub />}>
  GitHub
</DotBadge>

Sizes

DotBadge accepts the same size values as Badge (xs, sm, md, lg, xl) — the dot (or icon) scales automatically to match:

<DotBadge size="xs">Extra small</DotBadge>
<DotBadge size="sm">Small</DotBadge>
<DotBadge size="md">Medium</DotBadge>
<DotBadge size="lg">Large</DotBadge>
<DotBadge size="xl">Extra large</DotBadge>

Props

DotBadge extends all Badge props except variant and leftSection, which are managed internally.