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

BadgePrimitive

A basic type that allows you to choose colors to fit any need.

import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
import BadgePrimitive from "@kiwicom/orbit-components/lib/BadgePrimitive";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import AirplaneTakeoff from "@kiwicom/orbit-components/lib/icons/AirplaneTakeoff";
() => (
  <Stack flex>
    <BadgePrimitive
      icon={<AirplaneTakeoff />}
      background="linear-gradient(264.15deg, #FC8D3E 0%, #F16E5B 100%)"
      foregroundColor={defaultTheme.orbit.colorTextWhite}
    >
      Orbit
    </BadgePrimitive>
    <BadgePrimitive
      icon={<AirplaneTakeoff />}
      background="url(https://images.kiwi.com/photos/60x60/paris_fr.jpg)"
      foregroundColor={defaultTheme.orbit.colorTextWhite}
    >
      Orbit
    </BadgePrimitive>
  </Stack>
)

Component status

Figma
n/a
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Guidelines

Follow badge guidelines

Badge primitives are still badges. So make sure to follow all the guidelines for badge components.

Use freedom wisely

With great freedom comes great responsibility. Primitive components offer many more options for styling. Use these options wisely and make sure your badges are still accessible to everyone.

Related components

Badge

See the components related to badges.

ButtonPrimitive

Badges (even primitive ones) should not have any actions associated with them. To offer an action in a component you can style yourself, consider a button primitive.