Data display

Badge

A compact label for a status, count or category.

Class name	Type	Description
`badgeplf:badge`	Component	Badge; light grey on its own
`badge-iconplf:badge-icon`	Part	An SVG icon in the badge; an icon class there doesn't need it
`badge-labelplf:badge-label`	Part	The text beside an icon
`badge-softplf:badge-soft`	Style	A light tint
`badge-outlineplf:badge-outline`	Style	A border without a fill
`badge-neutralplf:badge-neutral`	Color	Neutral (dark) color
`badge-primaryplf:badge-primary`	Color	Primary color
`badge-successplf:badge-success`	Color	Success color
`badge-warningplf:badge-warning`	Color	Warning color
`badge-errorplf:badge-error`	Color	Error color
`badge-infoplf:badge-info`	Color	Info color

Default

Badge

<span class="badge">Badge</span>

<span class="plf:badge">Badge</span>

import { Badge } from '@pelatform/react';

export function Example() {
  return <Badge>Badge</Badge>;
}

import { Badge } from '@pelatform/react/prefixed';

export function Example() {
  return <Badge>Badge</Badge>;
}

Colors

Neutral Primary Success Warning Error Info

<span class="badge badge-neutral">Neutral</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-info">Info</span>

<span class="plf:badge plf:badge-neutral">Neutral</span>
<span class="plf:badge plf:badge-primary">Primary</span>
<span class="plf:badge plf:badge-success">Success</span>
<span class="plf:badge plf:badge-warning">Warning</span>
<span class="plf:badge plf:badge-error">Error</span>
<span class="plf:badge plf:badge-info">Info</span>

import { Badge } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Badge color="neutral">Neutral</Badge>
      <Badge color="primary">Primary</Badge>
      <Badge color="success">Success</Badge>
      <Badge color="warning">Warning</Badge>
      <Badge color="error">Error</Badge>
      <Badge color="info">Info</Badge>
    </>
  );
}

import { Badge } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Badge color="neutral">Neutral</Badge>
      <Badge color="primary">Primary</Badge>
      <Badge color="success">Success</Badge>
      <Badge color="warning">Warning</Badge>
      <Badge color="error">Error</Badge>
      <Badge color="info">Info</Badge>
    </>
  );
}

Write text that names the status, such as “3 unread messages”; color and icons only support it.

Soft

Draft Featured Published Needs review Failed Scheduled

<span class="badge badge-neutral badge-soft">
  <span class="icon icon-info-circle"></span>
  <span class="badge-label">Draft</span>
</span>
<span class="badge badge-primary badge-soft">
  <span class="icon icon-arrow-right"></span>
  <span class="badge-label">Featured</span>
</span>
<span class="badge badge-success badge-soft">
  <span class="icon icon-circle-check"></span>
  <span class="badge-label">Published</span>
</span>
<span class="badge badge-warning badge-soft">
  <span class="icon icon-alert-triangle"></span>
  <span class="badge-label">Needs review</span>
</span>
<span class="badge badge-error badge-soft">
  <span class="icon icon-circle-x"></span>
  <span class="badge-label">Failed</span>
</span>
<span class="badge badge-info badge-soft">
  <span class="icon icon-info-circle"></span>
  <span class="badge-label">Scheduled</span>
</span>

<span class="plf:badge plf:badge-neutral plf:badge-soft">
  <span class="plf:icon plf:icon-info-circle"></span>
  <span class="plf:badge-label">Draft</span>
</span>
<span class="plf:badge plf:badge-primary plf:badge-soft">
  <span class="plf:icon plf:icon-arrow-right"></span>
  <span class="plf:badge-label">Featured</span>
</span>
<span class="plf:badge plf:badge-success plf:badge-soft">
  <span class="plf:icon plf:icon-circle-check"></span>
  <span class="plf:badge-label">Published</span>
</span>
<span class="plf:badge plf:badge-warning plf:badge-soft">
  <span class="plf:icon plf:icon-alert-triangle"></span>
  <span class="plf:badge-label">Needs review</span>
</span>
<span class="plf:badge plf:badge-error plf:badge-soft">
  <span class="plf:icon plf:icon-circle-x"></span>
  <span class="plf:badge-label">Failed</span>
</span>
<span class="plf:badge plf:badge-info plf:badge-soft">
  <span class="plf:icon plf:icon-info-circle"></span>
  <span class="plf:badge-label">Scheduled</span>
</span>

import { Badge, BadgeLabel, Icon } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Badge color="neutral" variant="soft">
        <Icon name="info-circle" />
        <BadgeLabel>Draft</BadgeLabel>
      </Badge>
      <Badge color="primary" variant="soft">
        <Icon name="arrow-right" />
        <BadgeLabel>Featured</BadgeLabel>
      </Badge>
      <Badge color="success" variant="soft">
        <Icon name="circle-check" />
        <BadgeLabel>Published</BadgeLabel>
      </Badge>
      <Badge color="warning" variant="soft">
        <Icon name="alert-triangle" />
        <BadgeLabel>Needs review</BadgeLabel>
      </Badge>
      <Badge color="error" variant="soft">
        <Icon name="circle-x" />
        <BadgeLabel>Failed</BadgeLabel>
      </Badge>
      <Badge color="info" variant="soft">
        <Icon name="info-circle" />
        <BadgeLabel>Scheduled</BadgeLabel>
      </Badge>
    </>
  );
}

import { Badge, BadgeLabel, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Badge color="neutral" variant="soft">
        <Icon name="info-circle" />
        <BadgeLabel>Draft</BadgeLabel>
      </Badge>
      <Badge color="primary" variant="soft">
        <Icon name="arrow-right" />
        <BadgeLabel>Featured</BadgeLabel>
      </Badge>
      <Badge color="success" variant="soft">
        <Icon name="circle-check" />
        <BadgeLabel>Published</BadgeLabel>
      </Badge>
      <Badge color="warning" variant="soft">
        <Icon name="alert-triangle" />
        <BadgeLabel>Needs review</BadgeLabel>
      </Badge>
      <Badge color="error" variant="soft">
        <Icon name="circle-x" />
        <BadgeLabel>Failed</BadgeLabel>
      </Badge>
      <Badge color="info" variant="soft">
        <Icon name="info-circle" />
        <BadgeLabel>Scheduled</BadgeLabel>
      </Badge>
    </>
  );
}

Outline

Draft Featured Published Needs review Failed Scheduled

<span class="badge badge-neutral badge-outline">
  <span class="icon icon-info-circle"></span>
  <span class="badge-label">Draft</span>
</span>
<span class="badge badge-primary badge-outline">
  <span class="icon icon-arrow-right"></span>
  <span class="badge-label">Featured</span>
</span>
<span class="badge badge-success badge-outline">
  <span class="icon icon-circle-check"></span>
  <span class="badge-label">Published</span>
</span>
<span class="badge badge-warning badge-outline">
  <span class="icon icon-alert-triangle"></span>
  <span class="badge-label">Needs review</span>
</span>
<span class="badge badge-error badge-outline">
  <span class="icon icon-circle-x"></span>
  <span class="badge-label">Failed</span>
</span>
<span class="badge badge-info badge-outline">
  <span class="icon icon-info-circle"></span>
  <span class="badge-label">Scheduled</span>
</span>

<span class="plf:badge plf:badge-neutral plf:badge-outline">
  <span class="plf:icon plf:icon-info-circle"></span>
  <span class="plf:badge-label">Draft</span>
</span>
<span class="plf:badge plf:badge-primary plf:badge-outline">
  <span class="plf:icon plf:icon-arrow-right"></span>
  <span class="plf:badge-label">Featured</span>
</span>
<span class="plf:badge plf:badge-success plf:badge-outline">
  <span class="plf:icon plf:icon-circle-check"></span>
  <span class="plf:badge-label">Published</span>
</span>
<span class="plf:badge plf:badge-warning plf:badge-outline">
  <span class="plf:icon plf:icon-alert-triangle"></span>
  <span class="plf:badge-label">Needs review</span>
</span>
<span class="plf:badge plf:badge-error plf:badge-outline">
  <span class="plf:icon plf:icon-circle-x"></span>
  <span class="plf:badge-label">Failed</span>
</span>
<span class="plf:badge plf:badge-info plf:badge-outline">
  <span class="plf:icon plf:icon-info-circle"></span>
  <span class="plf:badge-label">Scheduled</span>
</span>

import { Badge, BadgeLabel, Icon } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Badge color="neutral" variant="outline">
        <Icon name="info-circle" />
        <BadgeLabel>Draft</BadgeLabel>
      </Badge>
      <Badge color="primary" variant="outline">
        <Icon name="arrow-right" />
        <BadgeLabel>Featured</BadgeLabel>
      </Badge>
      <Badge color="success" variant="outline">
        <Icon name="circle-check" />
        <BadgeLabel>Published</BadgeLabel>
      </Badge>
      <Badge color="warning" variant="outline">
        <Icon name="alert-triangle" />
        <BadgeLabel>Needs review</BadgeLabel>
      </Badge>
      <Badge color="error" variant="outline">
        <Icon name="circle-x" />
        <BadgeLabel>Failed</BadgeLabel>
      </Badge>
      <Badge color="info" variant="outline">
        <Icon name="info-circle" />
        <BadgeLabel>Scheduled</BadgeLabel>
      </Badge>
    </>
  );
}

import { Badge, BadgeLabel, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Badge color="neutral" variant="outline">
        <Icon name="info-circle" />
        <BadgeLabel>Draft</BadgeLabel>
      </Badge>
      <Badge color="primary" variant="outline">
        <Icon name="arrow-right" />
        <BadgeLabel>Featured</BadgeLabel>
      </Badge>
      <Badge color="success" variant="outline">
        <Icon name="circle-check" />
        <BadgeLabel>Published</BadgeLabel>
      </Badge>
      <Badge color="warning" variant="outline">
        <Icon name="alert-triangle" />
        <BadgeLabel>Needs review</BadgeLabel>
      </Badge>
      <Badge color="error" variant="outline">
        <Icon name="circle-x" />
        <BadgeLabel>Failed</BadgeLabel>
      </Badge>
      <Badge color="info" variant="outline">
        <Icon name="info-circle" />
        <BadgeLabel>Scheduled</BadgeLabel>
      </Badge>
    </>
  );
}

With icons

Changes saved Scheduled for tomorrow No icon

<span class="badge badge-success badge-soft">
  <span class="icon icon-circle-check"></span>
  <span class="badge-label">Changes saved</span>
</span>
<span class="badge badge-info badge-outline">
  <span class="badge-label">Scheduled for tomorrow</span>
  <span class="icon icon-info-circle"></span>
</span>
<span class="badge badge-neutral badge-outline">No icon</span>

<span class="plf:badge plf:badge-success plf:badge-soft">
  <span class="plf:icon plf:icon-circle-check"></span>
  <span class="plf:badge-label">Changes saved</span>
</span>
<span class="plf:badge plf:badge-info plf:badge-outline">
  <span class="plf:badge-label">Scheduled for tomorrow</span>
  <span class="plf:icon plf:icon-info-circle"></span>
</span>
<span class="plf:badge plf:badge-neutral plf:badge-outline">No icon</span>

import { Badge, BadgeLabel, Icon } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Badge color="success" variant="soft">
        <Icon name="circle-check" />
        <BadgeLabel>Changes saved</BadgeLabel>
      </Badge>
      <Badge color="info" variant="outline">
        <BadgeLabel>Scheduled for tomorrow</BadgeLabel>
        <Icon name="info-circle" />
      </Badge>
      <Badge color="neutral" variant="outline">No icon</Badge>
    </>
  );
}

import { Badge, BadgeLabel, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Badge color="success" variant="soft">
        <Icon name="circle-check" />
        <BadgeLabel>Changes saved</BadgeLabel>
      </Badge>
      <Badge color="info" variant="outline">
        <BadgeLabel>Scheduled for tomorrow</BadgeLabel>
        <Icon name="info-circle" />
      </Badge>
      <Badge color="neutral" variant="outline">No icon</Badge>
    </>
  );
}

Links

Use an <a href> for a badge that navigates; for a command, use a Button.

Usage guide

<a class="badge badge-primary badge-outline" href="#">
  <span class="badge-label">Usage guide</span>
  <span class="icon icon-arrow-right"></span>
</a>

<a class="plf:badge plf:badge-primary plf:badge-outline" href="#">
  <span class="plf:badge-label">Usage guide</span>
  <span class="plf:icon plf:icon-arrow-right"></span>
</a>

import { badgeClass, BadgeLabel, Icon } from '@pelatform/react';

export function Example() {
  return (
    <a className={badgeClass({ color: 'primary', variant: 'outline' })} href="#">
      <BadgeLabel>Usage guide</BadgeLabel>
      <Icon name="arrow-right" />
    </a>
  );
}

import { badgeClass, BadgeLabel, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <a className={badgeClass({ color: 'primary', variant: 'outline' })} href="#">
      <BadgeLabel>Usage guide</BadgeLabel>
      <Icon name="arrow-right" />
    </a>
  );
}

React

Badge from @pelatform/react renders this markup from its props, and badgeClass() gives a link or a router’s Link the same classes.

Prop	Values	Default
`color`	`neutral`, `primary`, `success`, `warning`, `error`, `info`	Light grey
`variant`	`soft`, `outline`, in the badge’s `color`, or grey without one	Filled

The part is BadgeLabel, and the other props are a span’s, className and ref included; badgeClass() takes color and variant.

Override on a root or on a single badge; they win over the modifiers. On a root, --plf-badge-bg and --plf-badge-color therefore reach every color and style: scope them to one, such as .badge-primary (.plf\:badge-primary with Prefixed CSS), or set the semantic color, such as --plf-color-primary, which every style of that color follows; the outline and soft text follow its text color, such as --plf-color-primary-text.

Variable	Default
`--plf-badge-bg`, `--plf-badge-color`	Set by the color and style; light grey without a color
`--plf-badge-border`	Transparent; on outline, `--plf-color-input` for neutral or the color’s border
`--plf-badge-radius`	Full radius (pill)
`--plf-badge-height`	`1.375rem` (22px) minimum; links are at least 24px
`--plf-badge-font-size`, `--plf-badge-font-weight`	`12px`, medium; independent of the body font size
`--plf-badge-icon-size`	`1em`