ayo/status-indicator
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: update readme & screenshot

Browse source
This commit is contained in:
ayo 2026-05-08 19:42:58 +02:00
parent 0c00898ac2
commit 9d607cf18d
2 changed files with 24 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
README.md
View file

@ -2,27 +2,36 @@
Circles with colors. That's it. That's the component. Circles with colors. That's it. That's the component.
## Quick usage via CDN
Inside your HTML `<head>`:
```html
<head>
<script type="module" src="https://esm.sh/@ayo-run/status-indicator"></script>
</head>
```
## Installation
```bash
# using npm
npm install @ayo-run/status-indicator
# or using pnpm
pnpm add @ayo-run/status-indicator
```
## Usage ## Usage
Set the `status` property of the `status-indicator` component to any of the following: positive, negative, active, intermediary. Set the `status` property of the `status-indicator` component to any of the following: positive, negative, active, intermediary.
```html ```html
<status-indicator status="positive"> <status-indicator status="positive"> All systems operational </status-indicator>
All systems operational <status-indicator status="negative"> Something's wrong </status-indicator>
</status-indicator> <status-indicator status="active"> It's just fine; carry on </status-indicator>
<status-indicator status="negative"> <status-indicator> Nothing matters </status-indicator>
Something's wrong <status-indicator status="intermediary"> Slow down... </status-indicator>
</status-indicator>
<status-indicator status="active">
It's just fine; carry on
</status-indicator>
<status-indicator>
Nothing matters
</status-indicator>
<status-indicator status="intermediary">
Slow down...
</status-indicator>
``` ```
### Result ### Result

BIN
screenshot.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 18 KiB