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">
  En blå badge
</Badge>

Attached badge

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

Badges comes in different color pallettes. 

<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">small badge</Badge>
  <Badge size="md">medium badge</Badge>
  <Badge size="lg">large badge</Badge>
</Flex>

Badge with icon.

<Badge 
  size="md"
  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>