Skip to content
Vy logo
Components

Badge

Badge – or markers – are used to indicate status or provide additional information that is directly linked to the component it is placed with.

Examples

A simple badge

<Badge colorPalette="blue" inverted>
  En blå badge
</Badge>

Attached badge

<Badge attached={true}>Attached badge</Badge>

The different colors

<Flex gap="1" padding="3" flexWrap="wrap">
    {[
      "neutral",
      "blue",
      "green",
      "grey",
      "orange",
      "red",
      "yellow",
      "cream",
    ].map((colorPalette) => (
      <Badge key={colorPalette} colorPalette={colorPalette}>
        {colorPalette}
      </Badge>
    ))}
</Flex>

Different sizes

<Flex gap="1">
  <Badge size="sm" variant="grey">small badge</Badge>
  <Badge size="md" variant="grey">medium badge</Badge>
  <Badge size="lg" variant="grey">large badge</Badge>
</Flex>

Badge with icon.
use 18 size icons.

<Badge 
  size="md" 
  variant="outline" 
  icon={StarsOutline18Icon}
>
  Badge med ikon
</Badge>

Badge with inverted colors

<Flex gap="1" padding="3" flexWrap="wrap">
    {[
      "neutral",
      "blue",
      "green",
      "grey",
      "orange",
      "red",
      "yellow",
      "cream",
    ].map((colorPalette) => (
      <Badge key={colorPalette} colorPalette={colorPalette} inverted>
        {colorPalette}
      </Badge>
    ))}
</Flex>