Design
Guide

OXD Introduction Design Thinking Tables & List View Cards & Shaps Modals & Popups Advance Componets Charts

UI Standards

Buttons

Button Breakdown

Button Types

Button Status

Active

Pressed | On Click

Hover

Inactive

#ff7b1d

#ff6c03 (5% darken)

#ff8a36 (5% lighten)

#e8eaef

#76bc21

#68a61d (5% darken)

#84d225 (5% lighten)

#e8eaef

#76bc21

#68a61d (5% darken)

#84d225 (5% lighten)

#cfd3de

#929baa

#64728c

#64728c

#cfd3de

#68a61d 
 bg = #68a61d (10% a)

#68a61d
 bg = #68a61d (20% a)

#68a61d 
 bg = #68a61d (15% a)

#cfd3de 
 font: #fff

#929baa

#64728c

#64728c

#e8eaef

#64728c
 bg = icon-color(10% a)

#64728c
 bg = icon-color(20% a)

#64728c
 bg = icon-color(15% a)

#e8eaef
 bg = #f6f7f9

#64728c
 bg = textcolor(10% a)

#64728c
 bg = textcolor(20% a)

#64728c
 bg = textcolor(15% a)

#e8eaef
 bg = #f6f7f9

Button with icon and more