UX Guide

A guide on various phoenix UI/UX components.

Contents

1. Theme
   • Light Theme
   • Dark Theme
2. UI Widgets
   • Confirmation dialogue
   • Dialogue with Text
3. UX Elements
   • Button

Theme

For changing the Theme of your editor go to View-> Themes-> Current Theme-> choose any theme you want.

Light Theme

It's is by default Theme

Dark Theme

In current Themes choose "Phoenix Dark" and click on done.

UI Widgets

Confirmation dialogue

Dialogue with text

UX Elements

Buttons

Steps to be followed

1. ENTER Ctrl-Shift-(C), it will automatically open the developers tool.
2. Go and hover over the button component.
3. In the developers console you can see button component.
   • Code will look something like this.
     • <button class='btn btn--linkblue btn--medium' href='#'>Lonely</button>

4.This is how you redirect your button to any of the functionality like save ,cancel etc.