Skip to content
Vy logo
Components
React
React Native
Figma

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 colorScheme="red" variant="solid">
  Innstilt
</Badge>

The different colour variants="solid"

<Flex gap={1} flexWrap="wrap" alignItems="center">
  <Badge colorScheme="white">
    I morgen
  </Badge>
  <Badge colorScheme="grey">
    Sykkel
  </Badge>
  <Badge colorScheme="light-blue">
    Test
  </Badge>
  <Badge colorScheme="dark-blue">
    Smartpris
  </Badge>
  <Badge colorScheme="orange">
    Beta
  </Badge>
  <Badge colorScheme="light-green">
    Raskest
  </Badge> 
  <Badge colorScheme="dark-green">
    Nattog
  </Badge> 
  <Badge colorScheme="red">
    Innstilt
  </Badge>
  <Badge colorScheme="light-yellow">
    Delvis instilt
  </Badge>
  <Badge colorScheme="yellow">
    Buss for tog
  </Badge>
</Flex>

The different colour variants="outline"

<Flex gap={1} flexWrap="wrap" alignItems="center">
  <Badge colorScheme="white" variant="outline">
    I morgen
  </Badge>
  <Badge colorScheme="grey" variant="outline">
    Sykkel
  </Badge>
  <Badge colorScheme="light-blue" variant="outline">
    Test
  </Badge>
  <Badge colorScheme="dark-blue" variant="outline">
    Smartpris
  </Badge>
  <Badge colorScheme="orange" variant="outline">
    Beta
  </Badge>
  <Badge colorScheme="light-green" variant="outline">
    Raskest
  </Badge> 
  <Badge colorScheme="dark-green" variant="outline">
    Nattog
  </Badge> 
  <Badge colorScheme="red" variant="outline">
    Innstilt
  </Badge>
  <Badge colorScheme="light-yellow" variant="outline">
    Delvis instilt
  </Badge>
  <Badge colorScheme="yellow" variant="outline">
    Buss for tog
  </Badge>
</Flex>

Badge with icon

<Badge 
  colorScheme="light-blue" 
  size="md" 
  variant="outline" 
  icon={<InformationOutline24Icon />}
>
  Informasjon
</Badge>