Badge
Badge – or markers – are used to indicate status or provide additional information that is directly linked to the component it is placed with.
Code examples
<Badge colorPalette="blue"> En blå badge </Badge>
Guidelines
Badges are usually displayed near alerts or as additional information set in a clear color hierarchy. Examples of use can be deviations in the travel suggestion list, showing that something is new or other relevant additional information.
Badges have a fixed height of 24 px for Mobile and 30 px for Desktop. The width is dynamic relative to the text in the label.
Non-interactive
Badges are static components and should not be clickable in any way. If you need an interactive component that looks like a badge, see documentation on InputChip.
Content
Badges should not contain long sentences. Keep them short and concise, preferably one word.
Icons
Small and medium badges should use icons that are 18x18, while large badges can use 24x24
Code
<Badge />
import { Badge } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
colorPalette | "neutral" | "blue" | "green" | "grey" | "orange" | "red" | "yellow" | "cream" | "disabled" | ||
size | "sm" | "md" | "lg" | Default "md" | |
attached | boolean | Defaults to false | |
children | React.ReactNode | Stick to one or few words | |
icon | IconComponent | Rendered to the right. Use 18px icons |