oat-chips

Chip component for Oat. ~1KB.

A lightweight chip/tag extension for Oat UI. Supports dismissible filters, color variants, and toggle selection.

See live demo at oat-chips.somesh.dev

Installation

CDN

Include the CSS and JS files directly in your HTML:

<link rel="stylesheet" href="https://unpkg.com/@someshkar/oat-chips/dist/chip.min.css">
<script src="https://unpkg.com/@someshkar/oat-chips/dist/chip.min.js" defer></script>

bun

bun install @someshkar/oat-chips

Then import in your project:

import '@someshkar/oat-chips/dist/chip.min.css';
import '@someshkar/oat-chips/dist/chip.min.js';

npm

npm install @someshkar/oat-chips

import '@someshkar/oat-chips/dist/chip.min.css';
import '@someshkar/oat-chips/dist/chip.min.js';

Download

Download the CSS and JS files:

wget https://raw.githubusercontent.com/someshkar/oat-chips/main/dist/chip.min.css
wget https://raw.githubusercontent.com/someshkar/oat-chips/main/dist/chip.min.js

Then include them in your project:

<link rel="stylesheet" href="./chip.min.css">
<script src="./chip.min.js" defer></script>

Basic usage

<!-- Basic -->
<button class="chip">Tag</button>

<!-- Dismissible -->
<button class="chip">
  <span>Filter: Active</span>
  <span class="chip-close">×</span>
</button>

<!-- Colors -->
<button class="chip success">Success</button>
<button class="chip warning">Warning</button>
<button class="chip danger">Danger</button>

<!-- Toggle selection -->
<button class="chip" aria-pressed="true">Selected</button>

License

MIT