# Components (/docs/products/dash-dots/reference/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](/docs/products/dash-dots/developers/views#data-attributes).
- **Children** on each page says what can go between the component's tags: nothing, text, or other components.

New to dots? [Views](/docs/products/dash-dots/developers/views) explains bindings, conditions and lists, and [Components](/docs/products/dash-dots/developers/components) shows how the pieces fit together.

## Layout

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

## Text and media

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

## Reading

| Component                                                                 | What it is                                                     |
| ------------------------------------------------------------------------- | -------------------------------------------------------------- |
| [`Prose`](/docs/products/dash-dots/reference/components/prose)            | Lays out articles and other long text for easy reading.        |
| [`RichText`](/docs/products/dash-dots/reference/components/rich-text)     | Shows Markdown from your server as formatted text.             |
| [`Quote`](/docs/products/dash-dots/reference/components/quote)            | Sets someone's words apart, with who said them.                |
| [`BulletList`](/docs/products/dash-dots/reference/components/bullet-list) | A list of points, with bullets or numbers.                     |
| [`Bullet`](/docs/products/dash-dots/reference/components/bullet)          | One point in a BulletList, holding its text and anything else. |

## Actions

| Component                                                        | What it is                                             |
| ---------------------------------------------------------------- | ------------------------------------------------------ |
| [`Button`](/docs/products/dash-dots/reference/components/button) | A button the person taps to do something.              |
| [`Chip`](/docs/products/dash-dots/reference/components/chip)     | A small button that can be selected, such as a filter. |

## Forms

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

## Lists and details

| Component                                                                | What it is                                                                                   |
| ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
| [`List`](/docs/products/dash-dots/reference/components/list)             | A list of rows in a card, which can load more rows as the person scrolls.                    |
| [`ListItem`](/docs/products/dash-dots/reference/components/list-item)    | One row in a List: a title, a subtitle, an icon or picture, and a value or badge at the end. |
| [`DetailRow`](/docs/products/dash-dots/reference/components/detail-row)  | A label and its value on one line, such as a line of a receipt.                              |
| [`Disclosure`](/docs/products/dash-dots/reference/components/disclosure) | A row the person opens to show more, then closes again.                                      |
| [`Steps`](/docs/products/dash-dots/reference/components/steps)           | Shows the stages of something, such as a payment's progress.                                 |
| [`Step`](/docs/products/dash-dots/reference/components/step)             | One stage in Steps: done, current, upcoming or failed.                                       |

## Navigation

| Component                                                    | What it is                                                             |
| ------------------------------------------------------------ | ---------------------------------------------------------------------- |
| [`Tabs`](/docs/products/dash-dots/reference/components/tabs) | A row of tabs, where one is chosen at a time.                          |
| [`Tab`](/docs/products/dash-dots/reference/components/tab)   | One tab in Tabs, with its label, and an optional icon and count badge. |

## Feedback

| Component                                                                   | What it is                                                               |
| --------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| [`Notice`](/docs/products/dash-dots/reference/components/notice)            | A message on the page, such as a warning or why a payment failed.        |
| [`Toast`](/docs/products/dash-dots/reference/components/toast)              | A short message that shows over the page for a moment, such as "Copied". |
| [`Sheet`](/docs/products/dash-dots/reference/components/sheet)              | A panel that slides up from the bottom, over the page.                   |
| [`Spinner`](/docs/products/dash-dots/reference/components/spinner)          | A small spinning circle that shows something is loading.                 |
| [`ProgressBar`](/docs/products/dash-dots/reference/components/progress-bar) | A bar that fills up to show how far along something is.                  |
| [`Skeleton`](/docs/products/dash-dots/reference/components/skeleton)        | A gray placeholder in the shape of content that is still loading.        |
| [`EmptyState`](/docs/products/dash-dots/reference/components/empty-state)   | 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](/docs/products/dash-dots/developers/theming#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](/docs/products/dash-dots/developers/theming#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`