Chip

Chip is a compact element used for categories, filters, or selections. Supports interactive and removable states.

Preview

HeavenEarthThunderWater

Variants

Filled

Solid background for emphasis.

DefaultSelected

<Chip>Default</Chip>
<Chip selected>Selected</Chip>

Outlined

Border-only for subtle appearance.

DefaultSelected

<Chip variant="outlined">Default</Chip>
<Chip variant="outlined" selected>Selected</Chip>

Soft

Subtle background for minimal emphasis.

DefaultSelected

<Chip variant="soft">Default</Chip>
<Chip variant="soft" selected>Selected</Chip>

Sizes

SmallMediumLarge

Size	Padding	Font	Usage
`sm`	8×4px	12px	Compact lists
`md`	12×6px	14px	Default
`lg`	16×8px	16px	Featured items

Interactive Chips

Chips can be selectable for filter-like behavior.

☰ Heaven☷ Earth☳ Thunder☵ Water☶ Mountain☴ Wind☲ Fire☱ Lake

const [selected, setSelected] = useState(['heaven', 'thunder', 'wind']);

const trigrams = ['Heaven', 'Earth', 'Thunder', 'Water', 'Mountain', 'Wind', 'Fire', 'Lake'];

<ChipGroup>
  {trigrams.map(trigram => (
    <Chip
      key={trigram}
      selected={selected.includes(trigram.toLowerCase())}
      onPress={() => toggleSelection(trigram.toLowerCase())}
    >
      {trigram}
    </Chip>
  ))}
</ChipGroup>

Removable Chips

Add an onClose handler to show a remove button.

Heaven ×Earth ×Thunder ×

const [tags, setTags] = useState(['Heaven', 'Earth', 'Thunder']);

<ChipGroup>
  {tags.map(tag => (
    <Chip
      key={tag}
      onClose={() => setTags(prev => prev.filter(t => t !== tag))}
    >
      {tag}
    </Chip>
  ))}
</ChipGroup>

With Icons

☰ Heaven☷ Earth☳ Thunder

<Chip icon={<TrigramIcon name="heaven" />}>Heaven</Chip>
<Chip icon={<TrigramIcon name="earth" />}>Earth</Chip>
<Chip icon={<TrigramIcon name="thunder" />}>Thunder</Chip>

Disabled

DisabledSelected disabled

<Chip disabled>Disabled</Chip>
<Chip selected disabled>Selected disabled</Chip>

ChipGroup

Container for managing chip layout with consistent spacing.

RelationshipsCareerHealthSpiritualFinancialCreative

<ChipGroup spacing="sm">
  <Chip variant="outlined">Relationships</Chip>
  <Chip variant="outlined">Career</Chip>
  <Chip variant="outlined">Health</Chip>
  <Chip variant="outlined">Spiritual</Chip>
  <Chip variant="outlined">Financial</Chip>
  <Chip variant="outlined">Creative</Chip>
</ChipGroup>

API Reference

Chip Props

Prop	Type	Default	Description
`children`	`string`	Required	Chip label
`variant`	`'filled' \| 'outlined' \| 'soft'`	`'filled'`	Visual style
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Chip size
`selected`	`boolean`	`false`	Selected state
`onPress`	`() => void`	-	Press handler
`disabled`	`boolean`	`false`	Disable interaction
`icon`	`ReactNode`	-	Icon before label
`onClose`	`() => void`	-	Close handler (shows X)
`style`	`ViewStyle`	-	Custom styles

ChipGroup Props

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Chip elements
`spacing`	`'sm' \| 'md' \| 'lg'`	`'sm'`	Gap between chips
`style`	`ViewStyle`	-	Custom styles

Complete Example

import { Chip, ChipGroup, Card, Input } from '@synchronicity/react-native';
import { View, Text, StyleSheet } from 'react-native';
import { useState } from 'react';

function ReadingTagEditor({ reading, onUpdate }) {
  const [tags, setTags] = useState(reading.tags || []);
  const [newTag, setNewTag] = useState('');

  const suggestedTags = ['Career', 'Love', 'Health', 'Guidance', 'Decision'];
  const availableSuggestions = suggestedTags.filter(t => !tags.includes(t));

  const addTag = (tag: string) => {
    if (tag && !tags.includes(tag)) {
      const updated = [...tags, tag];
      setTags(updated);
      onUpdate({ ...reading, tags: updated });
    }
    setNewTag('');
  };

  const removeTag = (tag: string) => {
    const updated = tags.filter(t => t !== tag);
    setTags(updated);
    onUpdate({ ...reading, tags: updated });
  };

  return (
    <Card>
      <Text style={styles.title}>Tags</Text>

      {tags.length > 0 && (
        <ChipGroup spacing="sm" style={styles.section}>
          {tags.map(tag => (
            <Chip key={tag} onClose={() => removeTag(tag)}>
              {tag}
            </Chip>
          ))}
        </ChipGroup>
      )}

      <Input
        value={newTag}
        onChangeText={setNewTag}
        placeholder="Add custom tag..."
        onSubmitEditing={() => addTag(newTag)}
        accessibilityLabel="Add tag"
      />

      {availableSuggestions.length > 0 && (
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Suggestions</Text>
          <ChipGroup spacing="sm">
            {availableSuggestions.map(tag => (
              <Chip
                key={tag}
                variant="outlined"
                onPress={() => addTag(tag)}
              >
                {tag}
              </Chip>
            ))}
          </ChipGroup>
        </View>
      )}
    </Card>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 16,
  },
  section: {
    marginTop: 16,
  },
  sectionTitle: {
    fontSize: 14,
    color: '#8a8a9a',
    marginBottom: 8,
  },
});