Chip

A Chip is a compact label for a piece of metadata — a status, a version, a category. It carries a colour and a variant so several chips in a row can be told apart at a glance, and it is deliberately quieter than a badge used for counts.

Demo

Rendered live, with the same build of the library you install.

Colors:

DefaultAccentSuccessWarningDanger

Variants:

PrimarySecondaryTertiarySoft

Sizes:

SmallMediumLarge

Usage

Source

Chip.tsx

import { NChip } from '@nayan-ui/react';

const Chip = () => {
  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Colors:</h3>
      <div className="mb-5 flex flex-wrap items-center gap-2">
        <NChip color="default">Default</NChip>
        <NChip color="accent">Accent</NChip>
        <NChip color="success">Success</NChip>
        <NChip color="warning">Warning</NChip>
        <NChip color="danger">Danger</NChip>
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Variants:</h3>
      <div className="mb-5 flex flex-wrap items-center gap-2">
        <NChip color="accent" variant="primary">
          Primary
        </NChip>
        <NChip color="accent" variant="secondary">
          Secondary
        </NChip>
        <NChip color="accent" variant="tertiary">
          Tertiary
        </NChip>
        <NChip color="accent" variant="soft">
          Soft
        </NChip>
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Sizes:</h3>
      <div className="flex flex-wrap items-center gap-2">
        <NChip color="accent" size="sm">
          Small
        </NChip>
        <NChip color="accent" size="md">
          Medium
        </NChip>
        <NChip color="accent" size="lg">
          Large
        </NChip>
      </div>
    </div>
  );
};

export default Chip;

Attributes

5 props

Name	Type	Default	Details
children	ReactNode	Required	The children prop.
size	'sm' \| 'md' \| 'lg'	'md'	The size prop.
color	'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'	'default'	The color prop.
variant	'primary' \| 'secondary' \| 'tertiary' \| 'soft'	'secondary'	The variant prop.
className	string	''	The className prop.