KitlenoKitlenov2.0.0

Feedback / Status

Status

Status components are used to display the current state of a user, item, or process — such as online, offline, or loading — in a compact visual indicator.

Status Active

A solid dot indicating an online or active state.

StatusActive.jsx
export default function StatusActive() {
  return (
    <div className="inline-block w-3 h-3 bg-green-500 rounded-full"></div>
  )
}

Status Offline

A muted gray dot signaling an offline or inactive state.

StatusOffline.jsx
export default function StatusOffline() {
  return (
    <div className="inline-block w-3 h-3 bg-gray-500 rounded-full"></div>
  )
}

Status Pulse

An expanding ping animation around an orange dot, ideal for live or pending states.

StatusPulse.jsx
export default function StatusPulse() {
  return (
    <div className="relative">
      <div className="w-3 h-3 bg-[#ffa726] rounded-full animate-ping absolute inset-0"></div>
      <div className="w-3 h-3 bg-[#ffa726] rounded-full relative"></div>
    </div>
  )
}

Status Blinking

A gently pulsing green dot drawing attention to an active or changing state.

StatusBlinking.jsx
export default function StatusBlinking() {
  return (
    <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
  )
}

Status Bounce

A bouncing blue dot that conveys an in-progress or waiting state with subtle motion.

StatusBounce.jsx
export default function StatusBounce() {
  return (
    <div className="w-3 h-3 bg-[#64b5f6] rounded-full animate-bounce [animation-duration:2s]"></div>
  )
}