Rental
Status
The state of a record — a unit, a tenancy, an invoice, a payment — named from the set that record belongs to, in the colour every other set uses for the same meaning. Overdue and in arrears are both danger; paid and approved are both success; a reader learns the colours once.
Give it a set and a value. The label and tone come from the set, so the
app sends the machine value it already has and never words it twice.
Sets: unit, tenancy, invoice, payment, approval, maintenance,
reading. A value no set knows is shown neutral, in sentence case.
Preview
Section titled “Preview”<nana-status set="invoice" value="overdue"></nana-status>
<nana-status set="unit" value="occupied" variant="dot"></nana-status>The sets
Section titled “The sets”<div style="display: flex; flex-wrap: wrap; gap: 0.5rem">
<nana-status set="unit" value="occupied"></nana-status>
<nana-status set="unit" value="vacant"></nana-status>
<nana-status set="unit" value="reserved"></nana-status>
<nana-status set="unit" value="notice"></nana-status>
<nana-status set="unit" value="arrears"></nana-status>
<nana-status set="unit" value="maintenance"></nana-status>
</div>| Set | Values |
|---|---|
unit | occupied, vacant / available, reserved, notice, arrears / overdue, maintenance |
tenancy | draft, pending, active, notice, ended, terminated |
invoice | draft, issued, partial, paid, overdue, void |
payment | pending, matched, unmatched, reversed, failed |
approval | pending, approved, rejected, changes, withdrawn |
maintenance | open, scheduled, progress, resolved, closed |
reading | due, captured, flagged, approved |
What the colours mean
Section titled “What the colours mean”| Tone | Means |
|---|---|
| Success | Settled, in order — paid, active, approved |
| Info | Under way, nothing wrong — issued, scheduled |
| Warning | Needs attention soon — reserved, part paid, awaiting a decision |
| Danger | Wrong now — overdue, in arrears, failed |
| Accent | The brand’s own — an occupied unit |
| Alert | Work under way — maintenance, a repair in progress |
| Change | About to change — notice given |
| Neutral | Not in play — available, draft, void, ended |
The same meaning gets the same colour in every set, which is the point of having sets: a reader who has learnt that red is “overdue” on an invoice does not have to learn it again for arrears on a unit.
In a dense table
Section titled “In a dense table”variant="dot" drops the chip for a marker beside plain text, which reads
better twenty rows deep.
<nana-status set="invoice" value="paid" variant="dot"></nana-status>Your own sets
Section titled “Your own sets”Pass further sets as the sets property. They are looked in before the
built-in ones, so they can also reword a built-in value.
document.querySelector("nana-status").sets = { lease: { signed: { label: "Signed", tone: "success" } },};Installation
Section titled “Installation”npm install @nana-tec/ui-componentsOr copy the source in and own it:
npx @nana-tec/ui add statusimport "@nana-tec/ui-components/status";<nana-status set="invoice" value="overdue"></nana-status><nana-status set="unit" value="occupied" variant="dot"></nana-status>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
label | label | string | '' | Wording to use in place of the set's own |
set | set | string | '' | Which domain the value belongs to |
sets | sets | Record<string, StatusSet> | {} | Further sets to look the value up in before the built-in ones |
size | size | StatusSize | 'md' | |
tone | tone | StatusTone | undefined | — | Colour to use in place of the set's own, for a value outside every set |
value | value | string | '' | The record's status, as the app stores it |
variant | variant | StatusVariant | 'pill' | pill fills a chip; dot is a marker beside plain text, for dense tables |
Slots
| Slot | Description |
|---|---|
(default) | Replaces the label from the set |
CSS parts
| Part | Description |
|---|---|
::part(base) | The status container |
::part(dot) | The colour marker |
::part(label) | The status text |
CSS custom properties
| Property | Description |
|---|---|
--nana-status-bg | Background, overriding the tone |
--nana-status-color | Text colour, overriding the tone |
--nana-status-dot | Marker colour, overriding the tone |
--nana-tone-alert | Marker colour of the alert tone, for work under way such as maintenance |
--nana-tone-alert-strong | Text colour of the alert tone |
--nana-tone-alert-soft | Background of the alert tone |
--nana-tone-change | Marker colour of the change tone, for something about to change such as notice given |
--nana-tone-change-strong | Text colour of the change tone |
--nana-tone-change-soft | Background of the change tone |