Badge

Badge states

The state prop can be one of:

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

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

Inverted colors

Invert the badge color with inverted prop.

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

Pill (rounded)

The pill prop applies rounded edges.

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

Icon example

Badges used with <Icon> component.

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

Table example

Badges inside a table.

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

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>
  );
}