Tag
Offers a label that can optionally be selected and unselected or removed.
Tags allow users to clearly see selected options that can be added and removed. Use them to display selected cities in a search, potential modes of transportation, or anywhere you want interactive labels.
Tags are small indicators and so well-suited for cases where you want to add information but don’t want it grab as much attention as a button.
Component status
Figma
Web (React)
iOS (Swift)
Android (Kotlin)
DocsComponent structure
Guidelines
Keep it simple
Tags are small and can’t contain much information. They’re great for organizing and providing cues for what’s been selected. But you can’t fit a lot into that space.
If you have more information to display, use another component.
It’s also best to avoid cluttering up Tags with too many visual cues. Unless it’s necessary, try to keep tags as text only.
Use to organize content
Tags work well at displaying organization in a small space. Use them to show labels, categories, and other taxonomy to show the structure of your content.
Use to filter searches
With small screens, you don’t want to take up a lot of space with all of the options for filtering search results. Use tags to add progressive disclosure to your filters.
Tags allow you to show the category of filter in a small space. Their state lets users quickly see if the filter is applied and clear it.
import Badge from "@kiwicom/orbit-components/lib/Badge";
import Card from "@kiwicom/orbit-components/lib/Card";
import Checkbox from "@kiwicom/orbit-components/lib/Checkbox";
import ChoiceGroup from "@kiwicom/orbit-components/lib/ChoiceGroup";
import Popover from "@kiwicom/orbit-components/lib/Popover";
import Radio from "@kiwicom/orbit-components/lib/Radio";
import Separator from "@kiwicom/orbit-components/lib/Separator";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Stepper from "@kiwicom/orbit-components/lib/Stepper";
import StopoverArrow from "@kiwicom/orbit-components/lib/StopoverArrow";
import Tag from "@kiwicom/orbit-components/lib/Tag";
import Text from "@kiwicom/orbit-components/lib/Text";() => {
const [cabinBags, setCabinBags] = React.useState(0)
const [checkedBags, setCheckedBags] = React.useState(0)
const [stops, setStops] = React.useState("any")
const [checked, setChecked] = React.useState({
plane: true,
train: true,
bus: true,
})
const isBagsFiltered = cabinBags > 0 || checkedBags > 0
const isStopsFiltered = stops !== "any"
const isTransportFiltered =
checked.plane === false || checked.train === false || checked.bus === false
return (
<Stack>
<Stack direction="row" spacing="compact">
<Text>Amsterdam</Text>
<FlightDirect ariaLabel="to" />
<Text>Barcelona</Text>
</Stack>
<Stack direction="row" spacing="compact">
<Badge>Fri May 17</Badge>
<Text>to</Text>
<Badge>No return</Badge>
</Stack>
<Stack direction="row" spacing="compact">
<Popover
content={
<Stack>
<Stack justify="center" grow>
<Stack>
<Text>Cabin baggage</Text>
</Stack>
<Stepper
defaultValue={cabinBags}
maxValue={1}
minValue={0}
onChange={(value) => setCabinBags(value)}
/>
</Stack>
<Stack align="center">
<Stack>
<Text>Checked baggage</Text>
</Stack>
<Stepper
defaultValue={checkedBags}
maxValue={2}
minValue={0}
onChange={(value) => setCheckedBags(value)}
/>
</Stack>
</Stack>
}
>
<Tag
selected={isBagsFiltered}
onRemove={
isBagsFiltered
? () => {
setCabinBags(0)
setCheckedBags(0)
}
: undefined
}
>
Bags
</Tag>
</Popover>
<Popover
content={
<ChoiceGroup
label="Stops"
onChange={(event) => setStops(event.target.name)}
>
<Radio
name="non"
label="Any"
checked={stops === "any" || false}
/>
<Radio
name="non"
label="Nonstop"
checked={stops === "non" || false}
/>
<Radio
name="1stop"
label="Up to 1 stop"
checked={stops === "1stop" || false}
/>
<Radio
name="2stop"
label="Up to 2 stops"
checked={stops === "2stop" || false}
/>
</ChoiceGroup>
}
>
<Tag
selected={isStopsFiltered}
onRemove={
isStopsFiltered
? () => {
setStops("any")
}
: undefined
}
>
Stops
</Tag>
</Popover>
<Popover
content={
<ChoiceGroup
label="Transport"
onChange={(event) => {
const { name } = event.target
setChecked((prevState) => ({
...prevState,
[name]: !checked[name],
}))
}}
>
<Checkbox name="plane" label="Planes" checked={checked.plane} />
<Checkbox name="train" label="Trains" checked={checked.train} />
<Checkbox name="bus" label="Buses" checked={checked.bus} />
</ChoiceGroup>
}
>
<Tag
selected={isTransportFiltered}
onRemove={
isTransportFiltered
? () => {
setChecked({
plane: true,
train: true,
bus: true,
})
}
: undefined
}
>
Transport
</Tag>
</Popover>
</Stack>
<Separator />
{checked.plane && (
<Card
title={
<Stack flex align="center">
<Text>Excellent flight</Text>
<StopoverArrow stops="0" />
<Airplane ariaLabel="Plane" />
<Stack inline>
<Text>Up to 1</Text>
<BaggageCabin ariaLabel="cabin bag" />
</Stack>
<Stack inline>
<Text>Up to 2</Text>
<BaggageChecked ariaLabel="checked bags" />
</Stack>
</Stack>
}
/>
)}
{checked.train && stops !== "direct" && checkedBags <= 1 && (
<Card
title={
<Stack flex align="center">
<Text>Awesome train ride</Text>
<StopoverArrow stops="1" />
<Train ariaLabel="Train" />
<Stack inline>
<Text>Up to 1</Text>
<BaggageCabin ariaLabel="cabin bag" />
</Stack>
<Stack inline>
<Text>Up to 1</Text>
<BaggageChecked ariaLabel="checked bag" />
</Stack>
</Stack>
}
/>
)}
{checked.bus &&
stops !== "direct" &&
stops !== "1stop" &&
checkedBags <= 1 && (
<Card
title={
<Stack flex align="center">
<Text>Smooth bus ride</Text>
<StopoverArrow stops="2" />
<Bus ariaLabel="Bus" />
<Stack inline>
<Text>Up to 1</Text>
<BaggageCabin ariaLabel="cabin bag" />
</Stack>
<Stack inline>
<Text>Up to 1</Text>
<BaggageChecked ariaLabel="checked bag" />
</Stack>
</Stack>
}
/>
)}
</Stack>
)
}
Look & feel
Hover
Because tags are interactive, they darken on hover/focus. This shows users that they can do something by interacting with the tag.
Color
Tags have two states: default and selected. When a tag has been selected (such as when a filter is applied), it becomes darker to draw more attention.
Tags that are removable are Blue / Light as default. This helps distinguish them as more interactive. It also helps users see the possibility to remove the tag by clicking the close button.
Related components
Badge
For a static component to show things like status, use a badge.
Button
Tags can be added and removed and change state, but they don’t have actions that affect other things on their own. To offer an action in a simple component, consider a button.