Bifrost Design System

Design React CSS

Figma

import Badge from "@intility/bifrost-react/Badge";

Badge

Go to top

Props

Badge states

The state prop can be one of:

'default'
'neutral'
'brand'
'chill'
'attn'
'success'
'warning'
'alert'

TSX

<Badge>Default</Badge>
<Badge state='neutral'>Neutral</Badge>
<Badge state="brand">Brand</Badge>
<Badge state='chill'>Chill</Badge>
<Badge state='attn'>Attn</Badge>
<Badge state='success'>Success</Badge>
<Badge state='warning'>Warning</Badge>
<Badge state='alert'>Alert</Badge>

DefaultNeutralBrandChillAttnSuccessWarningAlert

Inverted colors

Invert the badge color with inverted prop.

TSX

<Badge inverted>Default</Badge>
<Badge inverted state='neutral'>Neutral</Badge>
<Badge inverted state="brand">Brand</Badge>
<Badge inverted state='chill'>Chill</Badge>
<Badge inverted state='attn'>Attn</Badge>
<Badge inverted state='success'>Success</Badge>
<Badge inverted state='warning'>Warning</Badge>
<Badge inverted state='alert'>Alert</Badge>

DefaultNeutralBrandChillAttnSuccessWarningAlert

Pill (rounded)

The pill prop applies rounded edges.

TSX

<Badge pill>Pill</Badge>
<Badge pill state='success'>Success</Badge>
<Badge pill inverted>Inverted</Badge>

PillSuccessInverted

Icon example

Badges used with <Icon> component.

TSX

<Badge>
  <Icon icon={faInfoCircle} marginRight />
  Info
</Badge>
<Badge state="success">
  <Icon icon={faCheck} marginRight />
  Success
</Badge>
<Badge state="warning">
  Warning
  <Icon icon={faTriangleExclamation} marginLeft />
</Badge>

InfoSuccessWarning

Table example

Badges inside a table.

TSX

<Table>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>Title</Table.HeaderCell>
      <Table.HeaderCell>Added</Table.HeaderCell>
      <Table.HeaderCell>Status</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Problems with drivers [win]</Table.Cell>
      <Table.Cell>
        <FormatDate date={new Date("2020-01-06")} />
      </Table.Cell>
      <Table.Cell>
        <Badge>Active</Badge>
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Auth. error on Mac</Table.Cell>
      <Table.Cell>
        <FormatDate date={new Date("2020-01-07")} />
      </Table.Cell>
      <Table.Cell>
        <Badge state="success">Closed</Badge>
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Title	Added	Status
Problems with drivers [win]	06/01/2020	Active
Auth. error on Mac	07/01/2020	Closed

Sandbox

Open Sandbox

import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
import Badge from "@intility/bifrost-react/Badge";
import Icon from "@intility/bifrost-react/Icon";

export default function BadgeDemo() {
  return (
    <div className="bf-inline">
      <Badge>
        <Icon icon={faInfoCircle} marginRight />
        Info
      </Badge>
      <Badge state="success">
        <Icon icon={faCheck} marginRight />
        Success
      </Badge>
      <Badge state="warning">
        Warning
        <Icon icon={faTriangleExclamation} marginLeft />
      </Badge>
    </div>
  );
}