# Sizes

Source: https://iriscss.com/documentation/modifiers/sizes/

`.small`, `.medium` and `.large`. The default size needs no class.

The size classes work on these elements. Everything else keeps its size.

| Element | What changes |
| --- | --- |
| [Buttons](https://iriscss.com/documentation/elements/button/index.html.md#sizes) | Padding and font size |
| [Inputs, selects and textareas](https://iriscss.com/documentation/form/controls/index.html.md#sizes) | Padding, font size, room for icons |
| [Groups](https://iriscss.com/documentation/form/group/index.html.md#sizes) | Every control inside |
| [Select buttons](https://iriscss.com/documentation/components/dropdown/index.html.md#select) | Padding and font size, like a select |
| [Tables](https://iriscss.com/documentation/elements/table/index.html.md#sizes) | Cell padding and font size |
| [Cards](https://iriscss.com/documentation/components/card/index.html.md#sizes) | Padding |
| [Progress and meter](https://iriscss.com/documentation/elements/progress-and-meter/index.html.md) | Bar height |
| [Avatars](https://iriscss.com/documentation/components/avatar/index.html.md#sizes) | Diameter |
| [Icons](https://iriscss.com/documentation/components/icon/index.html.md#sizes) | Box size |

[Badges](https://iriscss.com/documentation/components/badge/index.html.md) have no size classes. They follow the font size around them, so a badge in a heading is larger than one in a paragraph.

Safari on iPhone zooms in on a field with text smaller than 16px, so `.small` inputs zoom when they get focus. Keep the default size for fields people type in on phones.

## Buttons and controls

```html
<div class="cluster">
  <button class="primary small">Small</button>
  <button class="primary">Default</button>
  <button class="primary medium">Medium</button>
  <button class="primary large">Large</button>
</div>
<input type="text" class="small" placeholder="Small" aria-label="Small">
<input type="text" placeholder="Default" aria-label="Default">
<input type="text" class="large" placeholder="Large" aria-label="Large">
```

## Cards and bars

```html
<article class="card small"><p>Small card</p></article>
<article class="card large"><p>Large card</p></article>
<progress class="small" value="30" max="100"></progress>
<progress class="large" value="70" max="100"></progress>
```