FivUI
DocsFeaturedTheme

Dots

A simple dot component to indicate status.

tsx
import { Dots } from "@/components/ui/dots"


export function DotsDemo() {
  return <Dots />
}

Installation

CLI

bash
npx fivui add dots

Manual

Copy and paste the following code into your project.

components/ui/dots.tsx
'use client'


import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'


import { cn } from '@/lib/utils'


const dotsVariants = cva('inline-block h-2.5 w-2.5 rounded-full', {
  variants: {
    variant: {
      default: 'bg-foreground',
      primary: 'bg-primary',
      secondary: 'bg-secondary',
      success: 'bg-green-500',
      warning: 'bg-yellow-500',
      error: 'bg-destructive',
    },
  },
  defaultVariants: {
    variant: 'default',
  },
})


export interface DotsProps
  extends React.HTMLAttributes<HTMLSpanElement>,
    VariantProps<typeof dotsVariants> {}


const Dots = React.forwardRef<HTMLSpanElement, DotsProps>(
  ({ className, variant, ...props }, ref) => {
    return (
      <span ref={ref} className={cn(dotsVariants({ variant }), className)} {...props} />
    )
  },
)


Dots.displayName = 'Dots'


export { Dots }

Usage

tsx
import { Dots } from "@/components/ui/dots"

Examples

Colors

tsx
<Dots />
<Dots variant="primary" />
<Dots variant="secondary" />
<Dots variant="success" />
<Dots variant="warning" />
<Dots variant="error" />

With Text

Cancelled
Ready
Cancelled
Waiting
Success
Warning
tsx
<div className="flex items-center gap-2">
    <Dots />
    <span>Cancelled</span>
</div>
<div className="flex items-center gap-2">
    <Dots variant="primary" />
    <span>Ready</span>
</div>
<div className="flex items-center gap-2">
    <Dots variant="error" />
    <span>Cancelled</span>
</div>
<div className="flex items-center gap-2">
    <Dots variant="secondary" />
    <span>Waiting</span>
</div>
<div className="flex items-center gap-2">
    <Dots variant="success" />
    <span>Success</span>
</div>
<div className="flex items-center gap-2">
    <Dots variant="warning" />
    <span>Warning</span>
</div>

API Reference

Dots

PropTypeDefaultDescription
variant"default" | "primary" | "secondary" | "success" | "warning" | "error""default"The color variant of the dot.