Skip to Content
ComponentsBadge

Badge

Use to emphasize a status, count, state or value.

Documentation

Usage

Status99+
import { Badge, Flex } from "@optiaxiom/react"; export function App() { return ( <Flex flexDirection="row"> <Badge>Status</Badge> <Badge intent="danger">99+</Badge> </Flex> ); }

Appearance

Use the intent and variant props to fine tune the appearance of the badge.

neutralinformationsuccesswarningdangerprimary
neutralinformationsuccesswarningdangerprimary
import { Badge, Flex } from "@optiaxiom/react"; const appearances = [ "neutral", "information", "success", "warning", "danger", "primary", ] as const; export function App() { return ( <Flex> <Flex flexDirection="row"> {appearances.map((intent) => ( <Badge intent={intent} key={intent}> {intent} </Badge> ))} </Flex> <Flex flexDirection="row"> {appearances.map((intent) => ( <Badge intent={intent} key={intent} variant="strong"> {intent} </Badge> ))} </Flex> </Flex> ); }

Badge as links

Set asChild to true and wrap children in an <a> element to render badge as links.

import { Badge } from "@optiaxiom/react"; export function App() { return ( <Badge asChild variant="subtle"> <a href="./props">Status</a> </Badge> ); }

Related

Indicator

Display a badge at the corner of another element.

Props

Badge

Supports all Box props in addition to its own. Renders a <span> element.

Prop

asChild

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

false | true

className

string

intent

Control the appearance by selecting between the different badge types.

"information" | "success" | "warning" | "danger" | "neutral" | "primary"

Default: neutral

lineClamp

Truncate the text at specific number of lines.

"1" | "2" | "3" | "4"

truncate

Whether to truncate the text and add an ellipsis at the end.

false | true

variant

Control the style of the badge.

"strong" | "subtle"

Default: subtle

Changelog

0.13.0

  • Renamed variants light -> subtle and solid -> strong

0.1.0

  • Added component
Last updated on