Chip
Chips are compact little units that represent actions, filters or choices. When shown, they allow users to prompt actions, filter games/content and choose options. We use three types of chips in the Moon:
Action chip
Action chips prompt actions related to the game/content.Filter chip
Filter chips let users sieve through large categories.Selection chip
Selection chips allow users to select options that matter to them.Default
Sizes
Variants
Active
Icons
Is Stroke
Is Stroke with Icons
Chip props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| iconLeft | JSX.Element | boolean | No | - | Left icon |
| iconOnly | JSX.Element | boolean | No | - | Icon without text |
| iconRight | JSX.Element | boolean | No | - | Right icon |
| isActive | boolean | No | false | Active state |
| isStroke | boolean | No | false | Shows stroke on hover/active |
| size | sm | md | No | md | Size of chip |
| variant | default | ghost | No | default | Visual/Logical variant of chip |