Code examples
Line icon, info tag and travel tag, where Line Icon is set to size="sm"
<Flex gap={3} alignItems="center"> <LineIcon variant="ferry" size="sm" label="Ferry" /> <InfoTag variant="local-train" title="L2" description="Lillestrøm" /> <TravelTag variant="vy-bus" title="L2" description="Lillestrøm" /> </Flex>
Guidelines
There are two types of line tags – "info tags" and "travel tags". They are used in slightly different contexts. Additionally, you have the version with only an icon – "line icon".
There is a variety of different line tags, each with its own color and icon combination. Line tags can have both an icon, line number, and description, with icon and line number, or just an icon.
Line tags come in three different sizes: sm, md, and lg.
Info tags are used to inform about a "leg" on a journey – meaning what type of modality it is (bus, train, boat, etc.), which line number it is (46, L2, R5, etc.), and a descriptive text (often the final destination).
Travel tags take up a bit more visual space and can stand alone more easily in a design.
Travel tags can also be clickable.
Travel tags can also have deviation states, like if there is a problem with a part of your journey.
Travel tags can also be disabled.
Line icons – or line icons – are used when space is limited, and one wants to show a travel route with several different modalities.
Code
<TravelTag />
import { TravelTag } from "@vygruppen/spor-react";
Typically used for interactive elements, or when you want to give a line tag some visual aid
Props
Name | Type | Required? | Description |
|---|---|---|---|
title | string | Typically the line number, like L1, R2, 46 etc. The bold text of the travel tag | |
description | string | Typically the name of the end station of the modality. Shown in a normal font weight to the right of the title | |
variant | "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "alt-transport" | "walk" | "custom" | Sets the correct icon and color for the given modality | |
size | "sm" | "md" | "lg" | Default "md" | |
deviationLevel | "critical" | "major" | "minor" | "info" | "none" | Differentiates the travel tag. Useful for deviations. Default "none" | |
disabled | boolean | ||
customIconVariant | Variant | Sets the icon based on the passed variant. Only allowed (and required) when variant="custom" | |
foregroundColor | string | The foreground color of the travel tag. Only allowed (and required) when variant="custom" | |
backgroundColor | string | The background color of the travel tag. Only allowed (and required) when variant="custom" |
<InfoTag />
import { InfoTag } from "@vygruppen/spor-react";
A simpler version of the TravelTag, which is not interactive, and doesn't have a background color. Mostly used for added context
Props
Name | Type | Required? | Description |
|---|---|---|---|
title | string | Typically the line number, like L1, R2, 46 etc. The bold text of the info tag | |
description | string | Typically the name of the end station of the modality. Shown in normal font weight to the right of the title | |
variant | "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "alt-transport" | "walk" | "custom" | Sets the correct icon and color for the given modality | |
size | "sm" | "md" | "lg" | Default "md" | |
customIconVariant | Variant | Override the icon with another variant (local-bus, ferry etc). Only allowed (and required) when variant="custom" | |
backgroundColor | string | The background color of the info tag. Only allowed (and required) when variant="custom" | |
foregroundColor | string | The foreground color of the info tag. Only allowed (and required) when variant="custom" |
<LineIcon />
import { LineIcon } from "@vygruppen/spor-react";
Line icons can be used when line numbers are not relevant, and when you only want to show the correct modality. Used by TravelTag and InfoTag internally
Props
Name | Type | Required? | Description |
|---|---|---|---|
variant | "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "alt-transport" | "walk" | "custom" | Sets the correct icon and color combination for a given modality | |
size | "sm" | "md" | "lg" | Default "md" | |
customIconVariant | Variant | The custom icon variant. Only allowed (and required) when variant="custom" | |
backgroundColor | string | The background color of the line icon box. Only allowed (and required) when variant="custom" | |
label | string | This is required prop since lineIcon is a visual component with a significant information |