nili/ui
enfaartr
All components

Badge

Overview
15 exports6 variant axes17 props5 files
import { Badge, StatusBadge } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Appearances

Four treatments. Named appearance, not style — style is React’s own prop, and taking it would make an inline style impossible.

filledlightlighterstroke
import { Badge } from "@nili/ui"

export function Example() {
  return (
    <>
      <Badge appearance="filled">Filled</Badge>
      <Badge appearance="light">Light</Badge>
      <Badge appearance="lighter">Lighter</Badge>
      <Badge appearance="stroke">Stroke</Badge>
    </>
  )
}

Colors

Ten colours, free to combine with any appearance. The colour is decoration — put the meaning in the label.

filled
grayblueorangeredgreenyellowpurpleskypinkteal
light
grayblueorangeredgreenyellowpurpleskypinkteal
lighter
grayblueorangeredgreenyellowpurpleskypinkteal
stroke
grayblueorangeredgreenyellowpurpleskypinkteal
import { Badge } from "@nili/ui"

export function Example() {
  return (
    <>
      <Badge color="gray">Gray</Badge>
      <Badge color="blue">Blue</Badge>
      <Badge color="green">Green</Badge>
      <Badge color="red">Red</Badge>
    </>
  )
}

Sizes

Medium (20px) and Small (16px).

MediumSmallMediumSmall
import { Badge } from "@nili/ui"

export function Example() {
  return (
    <>
      <Badge size="medium">Medium</Badge>
      <Badge size="small">Small</Badge>
    </>
  )
}

Dot, icons and numbers

dot draws a leading dot; startIcon and endIcon take any node. A bare number is just children — there is no separate count prop.

ActiveNew12%2Disabled
import { Badge, Icon } from "@nili/ui"
import { RiSparkling2Line, RiArrowUpLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <Badge color="green" appearance="light" dot>
        Active
      </Badge>
      <Badge color="purple" startIcon={<Icon icon={RiSparkling2Line} />}>
        New
      </Badge>
      <Badge color="green" endIcon={<Icon icon={RiArrowUpLine} />}>
        12%
      </Badge>
      <Badge color="red">2</Badge>
    </>
  )
}

Status Badge

A separate component, because the colour follows the status: a “Completed” badge cannot be rendered in red by accident. Stroke or Light, with an icon or a dot.

stroke
completedpendingfaileddisabled
light
completedpendingfaileddisabled
with dot
completedpendingfaileddisabled
import { StatusBadge } from "@nili/ui"

export function Example() {
  return (
    <>
      <StatusBadge status="completed">Completed</StatusBadge>
      <StatusBadge status="pending" appearance="light">Pending</StatusBadge>
      <StatusBadge status="failed" dot>Failed</StatusBadge>
      <StatusBadge status="disabled" icon={false}>Disabled</StatusBadge>
    </>
  )
}