Components

Everything you can put on a page. Props are attributes. Events are attributes that start with on and name a handler in your controller:

XML

<Button variant="primary" loading="{{ paying }}" onClick="pay">Pay</Button>

A few rules hold for every component:

Every prop is optional.
A text prop can mix words and state, as in label="Pay {{ amount }}". Any other prop takes a plain value or a single binding, like disabled="{{ !ready }}". A prop on its own, such as disabled, means true.
Your handler gets the event. Its detail holds what the component reports, listed on each component's page, and its data holds the component's data-* attributes.
Children on each page says what can go between the component's tags: nothing, text, or other components.

New to dots? Views explains bindings, conditions and lists, and Components shows how the pieces fit together.

Layout

Component	What it is
`View`	A box that lays out what it holds in a column or a row, and can look like a card.
`Stack`	Layers what it holds on top of each other, such as a badge over a picture.
`Scroll`	A row the person scrolls sideways, such as a shelf of products.
`Carousel`	Slides the person swipes between, one at a time, with dots below.
`Grid`	Tiles in equal columns, for a menu of services.
`GridItem`	One tile in a Grid: an icon or picture with a short label.
`Footer`	Keeps the page's main button at the bottom of the screen while the page scrolls.
`Pinned`	Keeps what it holds on the top or bottom edge of the screen while the page scrolls.
`Divider`	A thin line between two parts of a page.

Text and media

Component	What it is
`Text`	Text, from a large amount or a title down to a caption.
`Link`	Text the person taps to open a web page or run an action.
`Icon`	One of Dash's built-in icons, in three sizes and any tone.
`Image`	A picture from your dot or from the web.
`Avatar`	A person's photo in a circle, or their initials when there's no photo.
`QRCode`	Shows text, such as a payment link, as a QR code any phone can scan.
`Badge`	A small colored label that shows a status in a word.

Reading

Component	What it is
`Prose`	Lays out articles and other long text for easy reading.
`RichText`	Shows Markdown from your server as formatted text.
`Quote`	Sets someone's words apart, with who said them.
`BulletList`	A list of points, with bullets or numbers.
`Bullet`	One point in a BulletList, holding its text and anything else.

Actions

Component	What it is
`Button`	A button the person taps to do something.
`Chip`	A small button that can be selected, such as a filter.

Forms

Component	What it is
`Input`	A one-line field for text, numbers, a phone number or a search.
`TextArea`	A field that holds a few lines of text the person types.
`AmountInput`	A field for an amount of money, in large type.
`CodeInput`	A field for a one-time code or PIN, with a box for each digit.
`Stepper`	Changes a number by steps with − and +, such as how many tickets.
`Slider`	Chooses a number by dragging along a line.
`Select`	A field that opens a list of options to choose one from.
`Option`	One option in a Select, with its value and the label people see.
`Switch`	An on and off switch for a setting that applies at once.
`Checkbox`	A box the person ticks to agree or to choose an option.
`RadioGroup`	A set of options where the person picks one.
`Radio`	One option in a RadioGroup, with its value and the label people see.

Lists and details

Component	What it is
`List`	A list of rows in a card, which can load more rows as the person scrolls.
`ListItem`	One row in a List: a title, a subtitle, an icon or picture, and a value or badge at the end.
`DetailRow`	A label and its value on one line, such as a line of a receipt.
`Disclosure`	A row the person opens to show more, then closes again.
`Steps`	Shows the stages of something, such as a payment's progress.
`Step`	One stage in Steps: done, current, upcoming or failed.

Component	What it is
`Tabs`	A row of tabs, where one is chosen at a time.
`Tab`	One tab in Tabs, with its label, and an optional icon and count badge.

Feedback

Component	What it is
`Notice`	A message on the page, such as a warning or why a payment failed.
`Toast`	A short message that shows over the page for a moment, such as "Copied".
`Sheet`	A panel that slides up from the bottom, over the page.
`Spinner`	A small spinning circle that shows something is loading.
`ProgressBar`	A bar that fills up to show how far along something is.
`Skeleton`	A gray placeholder in the shape of content that is still loading.
`EmptyState`	What to show where there's nothing yet, such as an empty list.

Value lists

Props that share a list of values.

Spacing

Space between or around components.

none small medium large

Sizes

The sizes of icons, avatars and spinners.

small medium large

Tones

Colors for meaning.

default muted info success warning danger

Status tones

Colors for status, the tones without muted.

default info success warning danger

Text tones

A text's color. onPrimary reads on a primary background. A dot's own colors come from its theme. See custom colors.

default muted info success warning danger onPrimary

Backgrounds

A box's fill: a color of the theme, a tone as a soft tint, or one of the dot's own colors. See custom colors.

background surface primary muted info success warning danger

Borders

A box's outline. subtle is the hairline cards have.

none subtle strong

Corner radii

A box's corners, scaled by the theme's shape. full makes pills and circles.

none small medium large full

Aspect ratios

The shape of a picture's or a video's box.

1:1 4:3 3:2 16:9 3:4 2:3 9:16

Icon names

Dash's icons.

arrow-down

arrow-left

arrow-right

arrow-up

bank

bell

bolt

calendar

card

cart

cash

check

chevron-down

chevron-left

chevron-right

chevron-up

clock

close

copy

download

edit

error

external-link

eye

eye-off

file

gift

globe

grid

headphones

heart

help

history

home

image

info

link

list

location

lock

logout

mail

microphone

minus

mobile

more

music

phone

playlist

plus

qr-code

receipt

refresh

search

send

settings

share

star

success

ticket

trash

upload

user

users

video

wallet

warning

water

wifi