Skip to main content
/
/
/
Badge

Badge

Colored text label to highlight information

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

Badge states

The state prop can be one of:

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

Inverted colors

Invert the badge color with inverted prop.

DefaultNeutralBrandChillAttnSuccessWarningAlert

Pill (rounded)

The pill prop applies rounded edges.

PillSuccessInverted

Icon example

Badges used with <Icon> component.

Table example

Badges inside a table.

TitleAddedStatus
Problems with drivers [win]06/01/2020Active
Auth. error on Mac07/01/2020Closed