Skip to main content
StatusBadge is a component that displays a status text with an indicator in any hex color or one of the predefined color names.

​
Example

import {StatusBadge} from "attio/client"

export function Example({isActive}: {isActive: boolean}) {
  const color = isActive ? "green" : "#FF0000"
  const label = isActive ? "Active" : "Inactive"

  return <StatusBadge color={color}>{label}</StatusBadge>
}

​
Props

​
color
StatusIndicatorColor
required
The color of the status badge. Can be any hex color (e.g., "#00D17E") or one of the predefined colors: "blue", "violet", "pink", "red", "orange", "yellow", "green", "cyan", or "grey".
​
children
React.ReactNode
required
The text to display in the status badge as a label.