Component

Badge

Small label or status pill with sizes, colors, and optional press handling.

←→

React Native

Badge variants

Short label or status pill.

Small

Medium

Large

Filled

Disabled

import { Badge, toast } from '@sohantalukder/rn-kit';

export function StatusBadge() {
  return (
    <Badge
      text="Active"
      size="medium"
      onPress={() => toast.show({ type: 'success', title: 'Status active' })}
    />
  );
}

Live component

smallmediumlargefilled

Use short labels.
Do not use badges as the only status signal when color matters.

Usage

import { Badge } from '@sohantalukder/rn-kit';

import { Badge, toast } from '@sohantalukder/rn-kit';

export function StatusBadge() {
  return (
    <Badge
      text="Active"
      size="medium"
      onPress={() => toast.show({ type: 'success', title: 'Status active' })}
    />
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

textstring-Primary text rendered by the component.

sizeComponentSize | numbermediumControls the rendered component scale.

bgColorColorValuethemeOverrides the screen background color supplied by the theme.

disabledbooleanfalsePrevents interaction and renders the disabled visual state.

onPress() => void-Called when the pressable component is activated.

Theme

Badge reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

small
medium
large
filled
disabled

Best Practices

Use short labels.
Do not use badges as the only status signal when color matters.