Chip | RiseUI

Small informational badges for labels, statuses, and categories — aligned with @heroui/react and chip.css (variants × semantic colors, sizes sm · md · lg).

Usage

Storybook `Default`: `color: accent`, `variant: secondary`, child `Label` (Hero defaultArgs).

const Row(
  children: [
    RiseChip(
      color: RiseChipColor.accent,
      variant: RiseChipVariant.secondary,
      child: Text('Label'),
    ),
  ],
)

Sizes

`sm` · `md` · `lg` — `Sizes` story (accent + secondary).

Wrap(
  spacing: 12,
  children: [
    RiseChip(
      color: RiseChipColor.accent,
      variant: RiseChipVariant.secondary,
      size: RiseChipSize.sm,
      child: Text('Small'),
    ),
    RiseChip(
      color: RiseChipColor.accent,
      variant: RiseChipVariant.secondary,
      size: RiseChipSize.md,
      child: Text('Medium'),
    ),
    RiseChip(
      color: RiseChipColor.accent,
      variant: RiseChipVariant.secondary,
      size: RiseChipSize.lg,
      child: Text('Large'),
    ),
  ],
)

With icons

`WithIcon`: leading + `Label` + trailing (circle-outline icons).

RiseChip(
  color: RiseChipColor.accent,
  variant: RiseChipVariant.secondary,
  leading: Icon(Icons.circle_outlined, size: 14),
  trailing: Icon(Icons.circle_outlined, size: 14),
  child: Text('Label'),
)

Statuses

`Statuses`: four variant rows × Information / Completed / Pending / Failed.

Wrap(
  spacing: 12,
  children: [
    RiseChip(
      variant: RiseChipVariant.primary,
      color: RiseChipColor.default_,
      leading: Icon(Icons.circle, size: 6),
      child: Text('Information'),
    ),
    RiseChip(
      variant: RiseChipVariant.primary,
      color: RiseChipColor.success,
      leading: Icon(Icons.circle, size: 6),
      child: Text('Completed'),
    ),
  ],
)

Variants

`Variants`: lg / md / sm blocks — variant × color matrix with icons + label.

// lg / md / sm × primary|secondary|tertiary|soft × five colors
RiseChip(
  color: RiseChipColor.accent,
  variant: RiseChipVariant.secondary,
  size: RiseChipSize.md,
  leading: Icon(Icons.circle_outlined, size: 14),
  trailing: Icon(Icons.circle_outlined, size: 14),
  child: Text('Label'),
)