Badge

Badges are visual indicators that appear for notifications, numeric counts, or tags to communicate key information, such as categories, statuses, and more.

Component preview

Shaded 
import * as UI from "@iyk/ui"

export default () => <UI.Badge2>Shaded</UI.Badge2>

Props

kind

"shaded" | "outline" | "information" | "positive" | "caution" | "danger"

Used to show which kind of badge should render

children

React.ReactNode | React.ReactNode[]

The content inside the Badge

divided

boolean

If true, the content parts will be divided by a vertical divider

Kind

Shaded Outline Information Positive Caution Danger
shaded
The default badge type used for most applications
outline
A subtle badge with a border and transparent background, used for secondary applications
danger
Use to call attention to draw immediate attention to critical issues, or to denote a decreasing incremement
information
Use to highlight informational messages or status updates
positive
Use to to indicate success, completion, or positive status updates
caution
Use to warn users about potential risks or important considerations that require attention but are not critical

Usage with icon

Use to visually emphasize key information or status with added clarity and quick recognition

22 
import * as Icon from "@iyk/icons"
import * as UI from "@iyk/ui"

export default () => (
  <UI.Badge2>
    <Icon.Chips /> 22
  </UI.Badge2>
)

Usage with icon only

Use for compact visual communication of status, alerts, or actions without the need for accompanying text 

import * as Icon from "@iyk/icons"
import * as UI from "@iyk/ui"

export default () => (
  <UI.Badge2>
    <Icon.Variant />
  </UI.Badge2>
)

Usage with divider

Use to separate and organize multiple pieces of related information within a compact visual element

All 9dcc8 
import * as Icon from "@iyk/icons"
import * as UI from "@iyk/ui"

export default () => (
  <UI.Badge2 divided>
    All 9dcc
    <>
      <Icon.Chips />8
    </>
  </UI.Badge2>
)