Skip to main content
The Badge API is experimental and may change in the future. It has been marked as @deprecated to remind the developer that it is experimental. It is not "deprecated", just experimental. Please don't use it in production versions of your app. We do not guarantee backward compatibility, or that the API will remain stable.
import {Experimental_Badge} from "attio/client"

​
Example

TypeScript
import {Experimental_DescriptionList, Experimental_Badge} from "attio/client"

export function InformationDialog() {
  return (
    <Experimental_DescriptionList label="Cryptids of Cornwall">
      <Experimental_DescriptionList.Item label="Categories" icon="Tag">
        <Experimental_Badge color="blue">Folklore</Experimental_Badge>
        <Experimental_Badge color="amber">Cornwall</Experimental_Badge>
        <Experimental_Badge color="lavender">Paranormal</Experimental_Badge>
      </Experimental_DescriptionList.Item>
    </Experimental_DescriptionList>
  )
}

​
Props

​
children
React.ReactNode
required
The text in the badge.Only text is allowed.
​
color
'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'lavender' | 'lime' | 'orange' | 'pink' | 'purple' | 'red' | 'yellow'
required
The color variant for the badge
⌘I