Your bookmarks

Badge / React Native

We use badges when we need to inform our users about relevant information, e.g., booking status. The badge is not clickable.

An Orbit component for displaying a badge.

To import the Badge component to your project:

import { Badge } from '@kiwicom/orbit-react-native';

Usage

<Badge>I'm a real badge!</Badge>

Props

Table below contains all types of the props available in Badge component.

Name Type Platform Default Description
children React$Node web/native The content of the Badge.
dataTest string web/native Optional prop for testing purposes.
icon React$Node web/native The displayed icon on the left.
type enum web/native "neutral" The color type of the Badge.
ariaLabel string web/native Adds prop adds aria-label to an element, useful for screenreaders.

enum

type
"neutral"
"dark"
"info"
"success"
"warning"
"critical"
"infoInverted"
"criticalInverted"
"successInverted"
"warningInverted"

Functional specs

@TODO Make NotificationBadge