# Money
> Source: https://design.nanatec.co.ke/components/money/
> An amount of money, written the way a ledger writes it: in its currency, at its currency's precision, in tabular figures so a column of them lines up, with debts and credits told apart.
> Status: beta
> Since: v0.0.36
A negative balance means different things in different places. On an
expense report it is a loss; on a tenant's account it is money the tenant
has paid ahead. `credit` says which, so the same number is not painted as a
debt where it is good news.
## Preview
```html
```
## Debts, credits and zero
```html
Rent due
Paid in advance
Arrears written off
Deposit held
```
| Amount | Reads as | Colour |
|---|---|---|
| Positive | KES 28,000.00 | Text |
| Negative | βKES 1,200.00, or (KES 1,200.00) with `negative="parentheses"` | Danger |
| Negative, with `credit` | KES 5,000.00 CR | Success |
| Zero | KES 0.00 | Muted |
| Empty | β | Text |
The minus sign is a true minus, not a hyphen, so it lines up with the figures
in a column. A screen reader hears "minus" or "in credit" rather than the
punctuation. `plain` keeps the colour off when the column is already coloured
by something else.
## Columns
Tabular figures are always on, so digits are all one width. `align="end"`
makes the figure a block lined up to the right, which is what a column of
amounts needs.
## Scale and precision
`scale="compact"` shortens 1,250,000 to 1.3M for a card or a cell, and keeps the
full figure in the tooltip. Decimals follow the currency β two for shillings,
none for yen β unless `precision` says otherwise. Payment APIs that send cents
can pass them as they are with `minor`.
## Drilling in
An amount is usually a sum of something. `href` makes it a link to the ledger
that adds up to it; `drillable` makes it a button that fires `nana-drill`, for
an app that opens the breakdown in place.
```html
```
## Installation
```bash
npm install @nana-tec/ui-components
```
Or copy the source in and own it:
```bash
npx @nana-tec/ui add money
```
## Usage
```js
import "@nana-tec/ui-components/money";
```
```html
```
```js
const el = document.querySelector("nana-money");
el.addEventListener("nana-drill", (e) => console.log(e.detail));
```
## API
## Storybook
See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-money--docs