Spicy Astro Playground

Components

Chip

A small badge. Each prop is set by whoever uses the component, so every instance can look different. The same component exists in Astro, React and Solid.

PropTypeDefault
labelstring'Chip'
countnumber0
colorCSS color'#e4572e'

Instances

Default0Messages3Errors12Done100

Usage

<Chip label="Messages" count={3} color="rebeccapurple" />

Live editors

Edit the inputs and the chip updates as you type.

Astro (vanilla script)

Messages3

React

Messages3

Solid

Messages3