<StatusBadge />

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

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".

React.ReactNode

required

The text to display in the status badge as a label.

⌘I

Introduction

Guides

Extensions

Workflow blocks

Notifications

Dialogs

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Example

Props

​Example

​Props

Example

Props