Badge

Badge is a small label component used to highlight status, categories, or counts. It supports multiple semantic variants and can be filled or outlined.

Preview

DefaultNewCompletePendingError

Variants

Default

Neutral badge for general labels.

LabelOutlined

<Badge>Label</Badge>
<Badge outlined>Outlined</Badge>

Gold

Primary accent badge for highlighting important items.

FeaturedNew

<Badge variant="gold">Featured</Badge>
<Badge variant="gold" outlined>New</Badge>

Success

Indicates completion or positive status.

CompleteVerified

<Badge variant="success">Complete</Badge>
<Badge variant="success" outlined>Verified</Badge>

Warning

Indicates attention needed or in-progress state.

PendingReview

<Badge variant="warning">Pending</Badge>
<Badge variant="warning" outlined>Review</Badge>

Error

Indicates errors or critical states.

FailedInvalid

<Badge variant="error">Failed</Badge>
<Badge variant="error" outlined>Invalid</Badge>

Info

Indicates informational states.

InfoBeta

<Badge variant="info">Info</Badge>
<Badge variant="info" outlined>Beta</Badge>

Sizes

SmallMediumLarge

Size	Font	Padding	Usage
`sm`	10px	6×2	Compact lists, tables
`md`	12px	8×3	Default, most cases
`lg`	14px	12×4	Headers, featured items

Use Cases

Reading Status

Hexagram 1New

Hexagram 23Read

Hexagram 44Saved

Category Tags

HeavenEarthThunderWater

API Reference

Props

Prop	Type	Default	Description
`children`	`string`	Required	Badge text
`variant`	`'default' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'gold'`	`'default'`	Color variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Badge size
`outlined`	`boolean`	`false`	Use outline style
`style`	`ViewStyle`	-	Custom styles

Complete Example

import { Badge, Card } from '@synchronicity/react-native';
import { View, Text } from 'react-native';

function ReadingCard({ reading }) {
  return (
    <Card variant="elevated">
      <View style={styles.header}>
        <Text style={styles.title}>{reading.hexagram.name}</Text>
        <Badge
          variant={reading.isNew ? 'gold' : 'default'}
          size="sm"
        >
          {reading.isNew ? 'New' : `#${reading.hexagram.number}`}
        </Badge>
      </View>
      <Text style={styles.date}>{reading.date}</Text>
    </Card>
  );
}