Developer mode
Opens components on the React tab by default.
Your bookmarks

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
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Component structure

Label: describes tag meaning and works best when short; icon: visually supports tag meaning; remove icon: optionally gives the option to remove tag.

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="small">
        <Text>Amsterdam</Text>
        <FlightDirect ariaLabel="to" />
        <Text>Barcelona</Text>
      </Stack>
      <Stack direction="row" spacing="small">
        <Badge>Fri May 17</Badge>
        <Text>to</Text>
        <Badge>No return</Badge>
      </Stack>
      <Stack direction="row" spacing="small">
        <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.