Skip to main content

Chip

The Chip component is used to represent small blocks of information, tags, choices, or actions that can be submitted or removed.

Import​

import { Chip } from '@lazy-panda-ui/lazy-panda-ui';

Usage​

import React from 'react';
import { Chip } from '@lazy-panda-ui/lazy-panda-ui';

function MyComponent() {
  return (
    <Chip
      label="Example Chip"
      onDelete={() => console.log('deleted')}
    />
  );
}

Props​

  • label: string
  • leftIcon?: React.ReactNode
  • rightIcon?: React.ReactNode
  • onPress?: () => void
  • selected?: boolean (default false)
  • variant?: 'filled' | 'outlined' | 'tonal' (default 'outlined')
  • size?: 'small' | 'medium' | 'large' (default 'medium')
  • disabled?: boolean (default false)
  • closeable?: boolean (default false)
  • onClose?: () => void
  • style?: ViewStyle
  • labelStyle?: TextStyle
  • testID?: string

Examples​

Basic Chips​

<Stack direction="row" spacing="sm">
  <Chip label="Basic" />
  <Chip label="Clickable" clickable />
  <Chip label="Deletable" onDelete={() => {}} />
  <Chip label="Disabled" disabled />
</Stack>

Chip Variants​

<Stack direction="row" spacing="sm">
  <Chip variant="filled" label="Filled" />
  <Chip variant="outlined" label="Outlined" />
  <Chip variant="tonal" label="Tonal" />
  <Chip variant="outlined" label="Selected" selected />
</Stack>

Sizes​

<Stack direction="row" spacing="sm">
  <Chip size="small" label="Small" />
  <Chip size="medium" label="Medium" />
  <Chip size="large" label="Large" />
</Stack>

With Icons​

<Stack direction="row" spacing="sm">
  <Chip leftIcon={<Icon name="user" />} label="With Icon" />
  <Chip rightIcon={<Icon name="close" />} label="Dismiss" />
  <Chip leftIcon={<Icon name="check" />} label="Selected" selected />
</Stack>

Closeable​

<Stack direction="row" spacing="sm">
  <Chip label="Closable" closeable onClose={() => {}} />
  <Chip label="Disabled" closeable disabled />
</Stack>

Interactive Chips​

Clickable Chips​

<Stack direction="row" spacing="sm">
  <Chip
    label="Click me"
    clickable
    onClick={() => console.log('clicked')}
  />
  <Chip
    label="Select"
    clickable
    selected
    color="primary"
  />
</Stack>

Deletable Chips​

<Stack direction="row" spacing="sm">
  <Chip
    label="Delete me"
    onDelete={() => console.log('deleted')}
  />
  <Chip
    label="Custom delete"
    onDelete={() => {}}
    deleteIcon={<Icon name="close" />}
  />
</Stack>

Customization​

Theming with ThemeProvider​

import { ThemeProvider, createTheme, defaultTheme } from '@lazy-panda-ui/lazy-panda-ui/theme';

const theme = createTheme(defaultTheme, {
  chip: {
    sizes: {
      medium: { minHeight: 36, paddingX: 14, fontSize: 15, iconSpacing: 6 },
    },
    variants: {
      outlined: {
        background: defaultTheme.colors.surface,
        selectedBackground: defaultTheme.colors.primaryContainer,
        text: defaultTheme.colors.onSurface,
        selectedText: defaultTheme.colors.primary,
        borderColor: defaultTheme.colors.outline,
        selectedBorderColor: defaultTheme.colors.primary,
      },
    },
    ripple: { color: defaultTheme.colors.onSurface },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Chip variant="outlined" label="Custom Chip" />
    </ThemeProvider>
  );
}

Custom Delete Icon​

<Chip
  label="Custom Delete"
  onDelete={() => {}}
  deleteIcon={
    <Icon
      name="trash"
      color="error"
      size="sm"
    />
  }
/>

Shape Variation​

<Stack direction="row" spacing="sm">
  <Chip
    label="Rounded"
    style={{ borderRadius: '16px' }}
  />
  <Chip
    label="Square"
    style={{ borderRadius: '4px' }}
  />
</Stack>

Array Management​

Chip Array​

function ChipArray() {
  const [chips, setChips] = React.useState([
    'React', 'TypeScript', 'JavaScript'
  ]);

  const handleDelete = (chipToDelete: string) => {
    setChips(chips.filter(chip => chip !== chipToDelete));
  };

  return (
    <Stack direction="row" spacing="sm">
      {chips.map(chip => (
        <Chip
          key={chip}
          label={chip}
          onDelete={() => handleDelete(chip)}
        />
      ))}
    </Stack>
  );
}

Best Practices​

  1. Use clear and concise labels
  2. Maintain consistent spacing
  3. Choose appropriate colors
  4. Handle interactions gracefully
  5. Consider mobile touch targets
  6. Provide visual feedback
  7. Keep delete actions reversible
  • Badge - For status indicators
  • Tag - For simpler labeling
  • Button - For primary actions
  • Avatar - For user representation in chips