SeatsMeter
Shows how many of a plan's seats are in use.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { Button, Row, SeatsMeter, Stack, Text } from '@weft-js/warp'export function Invite() { const used = state(10) 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={() => { if (used.value < 12) used.value++ }}>Add a seat</Button> </Row> </Stack> )}Installation
npm install @weft-js/warpUsage
tsx
import { SeatsMeter } from '@weft-js/warp'Filling up
A full plan turns caution.
tsx
import { SeatsMeter, Stack } from '@weft-js/warp'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 warp'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