Components / Actions / Add buttonOpen in Figma
Add button
ReadyCreates a new record from a list screen.
When to use
- A list screen whose main job is adding new records.
- Inline: adding another item inside a form or panel, such as one more row in a list being built.
When not to use
| If people need to | Use |
|---|---|
| Save or submit what is on the screen | Button |
| Reach more than one kind of action | Menu |
| Choose people, sites or items into a field | Picker field |
Anatomy
add_circle
addAdd item
- Phone container · square, gradient fill
- Icon · required
- Tablet container · pill, Add blue
- Label · tablet and inline only
Variants
| Variant | Purpose | Figma |
|---|---|---|
| Floating, phone | Square, green-to-turquoise gradient, icon only. Floats above the bottom navigation | Designed |
| Floating, tablet | Pill in Add blue with icon and label, when the page has one action | Designed |
| Inline | Full-width Add blue button inside a form or panel | Designed |
States
| State | When | What changes | Figma |
|---|---|---|---|
| Default | Ready to use | As specified | Designed |
| Pressed | Finger is down | A 10% black layer over the fill | Temporary rule |
Behaviour
- Tapping opens the new-record form full screen.
- The floating button stays in place while the list scrolls; the last card keeps enough space below it to be read.
- One floating button per screen, and only for adding.
Phone and tablet
| Phone | Tablet | |
|---|---|---|
| Shape | Square 56, corners 12, icon only | Pill 48 tall, corners 24, icon and label |
| Fill | Gradient Turquoise #00D6C9 to Antz green #37BD69 | Add blue #00AFD6 |
| Position | Right 24, 16 above the bottom navigation | Right 36 inside the gutter, 26 above the bottom navigation |
| When the page has more than one action | Floating button for adding; the rest in the menu | Not designed yet: ask |
Content
| Part | Rule |
|---|---|
| Label (tablet, inline) | "Add" and the record noun: "Add item" |
| Icon | Add circle on phone and inline, plain add on the tablet pill |
Do and don't
add_circle
DoUse one floating button, bottom right.
add_circle
edit
Don'tStack several floating buttons or use one for anything but adding.
Related
Specs
Click a value to copy it.
| Part | Property | Phone | Tablet |
|---|---|---|---|
| Phone button | Size | ||
| Corners | |||
| Fill | |||
| Shadow | |||
| Icon | |||
| Position | |||
| Tablet pill | Height | ||
| Corners | |||
| Fill | |||
| Border | |||
| Padding | |||
| Icon to label | |||
| Icon | |||
| Label | |||
| Shadow | |||
| Inline | Height | ||
| Corners | |||
| Fill | |||
| Icon | |||
| Label |
Accessibility
- The phone button is icon only, so it carries a spoken label: "Add" and the record noun.
- Touch area 56 on phone and 48 on tablet.
- White on Add blue scores 2.6 and white on the gradient as low as 1.8; the icon is large and the tablet label is 16 Medium, but no small text goes on these fills.
Changes
| Date | Change |
|---|---|
| 26 Oct 2026 | Phone button corners set to 12 (Egg), picked by Sourav. |
| 26 Oct 2026 | Gradient square kept for phone; Add blue pill for tablet when the page has one action; inline add in Add blue. |