Badge

A small label for a status or a category. With status it takes the color the dashboard uses for that entry status.

PublishedDraftPage

Badge.tsx

import {Badge} from 'alinea/components'

export function BadgeExample() {
  return (
    <>
      <Badge status="published">Published</Badge>
      <Badge status="draft">Draft</Badge>
      <Badge>Page</Badge>
    </>
  )
}

Statuses

PublishedDraftUnpublishedArchivedUntranslated

BadgeStatuses.tsx

import {Badge} from 'alinea/components'

export function BadgeStatusesExample() {
  return (
    <>
      <Badge status="published">Published</Badge>
      <Badge status="draft">Draft</Badge>
      <Badge status="unpublished">Unpublished</Badge>
      <Badge status="archived">Archived</Badge>
      <Badge status="untranslated">Untranslated</Badge>
    </>
  )
}

Icons and sizes

PublishedDraftArchivedBlog postShared

BadgeIcons.tsx

import {Badge} from 'alinea/components'
import {
  IcRoundArchive,
  IcRoundCheck,
  IcRoundEdit,
  IcRoundPublic,
  LucideFile
} from 'alinea/dashboard/icons'

export function BadgeIconsExample() {
  return (
    <>
      <Badge icon={IcRoundCheck} status="published">
        Published
      </Badge>
      <Badge icon={IcRoundEdit} status="draft">
        Draft
      </Badge>
      <Badge icon={IcRoundArchive} status="archived">
        Archived
      </Badge>
      <Badge icon={LucideFile} size="sm">
        Blog post
      </Badge>
      <Badge icon={IcRoundPublic} size="sm">
        Shared
      </Badge>
    </>
  )
}

Props

PropTypeDefaultDescription

iconIconType | ReactElementDefault –

size'default' | 'sm'Default 'default'

statusContentStatusDefault –Colors the badge like the matching entry status

titlestringDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

Accessibility

A badge is plain text. When its color carries meaning, make sure the text says the same.