Site settings
Change the appearance of the site to suit your preferences
Badge
Badge – or markers – are used to indicate status or provide additional information that is directly linked to the component it is placed with.
A simple badge
<Badge colorPalette="blue"> 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">small badge</Badge> <Badge size="md">medium badge</Badge> <Badge size="lg">large badge</Badge> </Flex>
Badge with icon.
use 18 size icons.
<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>