Badge

Badges are used to highlight an item's status for quick recognition.

Import

import { Badge } from '@sajari-ui/core';

import { Badge } from '@sajari-ui/core';

Usage

Editable Example

Default

<Badge>Default</Badge>

<Badge>Default</Badge>

Appearance

Pass the appearance prop to customize the color of the Badge based on usage.

Editable Example

DefaultPrimarySuccessWarningDangerNote

<Flex space="space-x-4">
  <Badge>Default</Badge>
  <Badge appearance="primary">Primary</Badge>
  <Badge appearance="success">Success</Badge>
  <Badge appearance="warning">Warning</Badge>
  <Badge appearance="danger">Danger</Badge>
  <Badge appearance="note">Note</Badge>
</Flex>

<Flex space="space-x-4">
  <Badge>Default</Badge>
  <Badge appearance="primary">Primary</Badge>
  <Badge appearance="success">Success</Badge>
  <Badge appearance="warning">Warning</Badge>
  <Badge appearance="danger">Danger</Badge>
  <Badge appearance="note">Note</Badge>
</Flex>

Badge Variants

Pass the variant prop and set to either subtle or solid to get a different style.

Editable Example

DefaultPrimarySuccessWarningDangerNote

<Flex space="space-x-4">
  <Badge variant="solid">Default</Badge>
  <Badge variant="solid" appearance="primary">
    Primary
  </Badge>
  <Badge variant="solid" appearance="success">
    Success
  </Badge>
  <Badge variant="solid" appearance="warning">
    Warning
  </Badge>
  <Badge variant="solid" appearance="danger">
    Danger
  </Badge>
  <Badge variant="solid" appearance="note">
    Note
  </Badge>
</Flex>

<Flex space="space-x-4">
  <Badge variant="solid">Default</Badge>
  <Badge variant="solid" appearance="primary">
    Primary
  </Badge>
  <Badge variant="solid" appearance="success">
    Success
  </Badge>
  <Badge variant="solid" appearance="warning">
    Warning
  </Badge>
  <Badge variant="solid" appearance="danger">
    Danger
  </Badge>
  <Badge variant="solid" appearance="note">
    Note
  </Badge>
</Flex>

Composition

You change the size of the badge by passing fontSize prop.

Editable Example

Something Pro 💪

<Text fontSize="xl" fontWeight="bold">
  Something
  <Badge appearance="success" margin="ml-1" fontSize="text-sm" textTransform="transform-none">
    Pro
    <Box as="span" role="img" aria-label="Muscles" margin="ml-1">
      💪
    </Box>
  </Badge>
</Text>

<Text fontSize="xl" fontWeight="bold">
  Something
  <Badge appearance="success" margin="ml-1" fontSize="text-sm" textTransform="transform-none">
    Pro
    <Box as="span" role="img" aria-label="Muscles" margin="ml-1">
      💪
    </Box>
  </Badge>
</Text>

Props

The Badge component composes Box component so you can pass props for Box.

Name	Type	Default	Description
`variant`	`subtle`, `solid`	`subtle`	The style variant of the badge.
`appearance`	`default`, `primary`, `success`, `warning`, `danger`, `note`	`default`	The color scheme to use for the badge based on it's purpose.