SeatsMeter
Shows how many of a plan's seats are in use.
SourcePackage @kerf-js/veneer
Preview
tsx
import { state } from '@kerf-js/core'import { Button, Row, SeatsMeter, Stack, Text} from '@kerf-js/veneer'export function Invite() { const used = state(10) const addSeat = () => { if (used.value < 12) used.value++ } return ( <Stack gap="related"> <SeatsMeter used={used.value} total={12} /> <Row justify="between"> <Text subtle>Pending invites use a seat.</Text> <Button size="sm" emphasis="outline" tone="neutral" aria-disabled={ used.value >= 12 ? 'true' : undefined } onClick={addSeat} > Add a seat </Button> </Row> </Stack> )}Installation
npm install @kerf-js/veneerUsage
tsx
import { SeatsMeter } from '@kerf-js/veneer'Filling up
A full plan turns caution.
tsx
import { SeatsMeter, Stack } from '@kerf-js/veneer'export function Levels() { return ( <Stack gap="group"> <SeatsMeter used={4} total={12} /> <SeatsMeter used={10} total={12} /> <SeatsMeter used={12} total={12} /> </Stack> )}Accessibility
- This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
used | number | — | Seats taken, pending invites included. |
total | number | — | Seats on the plan. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="meter"] [data-part="note"]
noterailrail-fill
RelatedMembers tableUsage meter