--- tags: atom --- # Atom / Primary Button This is an overview of primary 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: **2C7BE5** <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%3D12196%253A1030&chrome=DOCUMENTATION" allowfullscreen></iframe> ... ### Hover This is what the button looks like when the user hovers over it. The **HEX** code of the colour used is: **5598F1** <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%3D18725%253A18952&chrome=DOCUMENTATION" allowfullscreen></iframe> ... ### Pressed This is what the button looks like when the user presses it. The **HEX** code of the colour used is: **246DCE** <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%3D18725%253A3628&chrome=DOCUMENTATION" allowfullscreen></iframe> ... ### Variables - **Shadow** - If a shadow is needed, like in the "Review & Launch Deal Modal", this is how the button will display. <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%3D18725%253A19145&chrome=DOCUMENTATION" allowfullscreen></iframe> ... ## Questions