---
# System prepended metadata

title: Atom / Edit Menu Button (3 Dots)
tags: [atom]

---

---
tags: atom
---
# Atom / Edit Menu Button (3 Dots)

This is an overview of Edit button in its Standby, Hover, and Pressed states.

## States & Variables
...

### Standby

This is what the button looks like when no action is being taken, its standard state. The **HEX** code of the colour used is: **D2DDEC**

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D12097%253A1534" allowfullscreen></iframe>

...

### Hover

This is what the button looks like when the user hovers over it. The **HEX** code of the colour used is: **D2DDEC** with **F9FBFF**

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D22021%253A0" allowfullscreen></iframe>

...

### Pressed

This is what the button looks like when the user presses it. The **HEX** code of the colour used is: **D2DDEC** with **F2F7FD**

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D22021%253A15" allowfullscreen></iframe>

...

#### Variables

- Dropdown Menu
    - Usually when the Edit (3 Dot) Menu button is pressed, as dropdown menu will appear. 
    - The Edit button will continue to show the "Pressed" state whilst a dropdown menu appears below. As follows...

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fe7aAVFo0T5tVAjxCmCh3XK%2FRaise%3Fnode-id%3D12097%253A2561" allowfullscreen></iframe>

...



## Questions

