UI Elements

UI Elements

Button clearly communicates the call to action when user press it. Buttons can be text, an icon or both.

Button clearly communicates the call to action when user press it. Buttons can be text, an icon or both.

4.1.1 Types

There are different types of buttons can be used which is listed as below.

  • Primary & Secondary Button

Primary are those who has highest priority & Secondary are those who has lower priority i.e In a form, suppose we have Submit and Reset buttons where Submit has the highest priority hence will consider as a primary button where as Reset has a lower priority as compared to Submit will consider as a secondary button.

  • Flat Button Set

Flat buttons are those having only text without background color/border specified around the placeholder. Mainly will be used in popup dialog box.

  • Icons/Text Based Dropdown Button Set

Icon & text based button which will have two call to action in the single button. Clicking on the Icon&text will occur the primary call to action and by clicking on the downside arrow on right side of the button, will open the dropdown menu with relative options to choose from.

  • Icons Based Button Set

Buttons are those having only icon in the placeholder & by clicking on the icon , the main call to action will occur.

  • Icon Based Group Button Set

When two or more icons based buttons needs to place together, defined patterns needs to be considered as shown in Certain consideration must be taken care while adopting buttons which are listed as below. fig 4.1.1

Different types of button set
Fig 4.1.1 Different types of button set

4.1.2 Guideline

Certain guidelines must be taken care while adopting buttons which are listed as below.

  • Primary buttons can be text based or icon/text based
  • Except flat button all buttons will contain 1px border around the placeholder.
  • Text size for the primary/secondary buttons is 14px
  • Text based primary button will have 1px border around the button with color DarkBlue(#0c79c1) . Left/Right padding from the placeholder will be 24px. Background will be with color SkyBlue(#2991d6)  . Font color will be White(#ffffff)  . Height will be 40px.
  • Text based secondary button will have 1px bo rder around with color SkyBlue(#2991d6)   & white (#ffffff)  . background. Text color will be SkyBlue(#2991d6)  .
  • Icon/text based primary button will have 2 section, placeholder for icon & text.Icon placeholder will have 40 px height/width with 16px icon. Background for the icon placeholder will be DarkBlue(#0c79c1)  while the text placeholder will remain the same as text based button specification. The whole button will have 1px border with color DarkBlue(#0c79c1) .
  • Distance between any near by primary/secondary buttons will be 10px.
  • Width of the button will depend upon t he text length. Text length is limited to 20 characters, anything more than 20 characters button will converted icon based button.
  • Icon/text based Button with dropdown option will have 3 section. Placeholder for Icon, text & downside arrow. Height of the button will be 24px, icon placeholder will have 24 px width with 16px icon, text placeholder will have 10px padding left/right and size of the text will be 11px. While the color specification for icon & text placeholder will remain the same as icon/text based button. The width of the downside arrow will be 14px with white background and having down side arrow icon with color SkyBlue(#2991d6)  . The same is explains in the prototype .
  • Flat button text will be bold with 16px font size. Text color will be SkyBlue(#2991d6)  .
  • Icon based button will have placeholder with 16px icon. Height & width of the placeholder will be 38px including 1PX border around with Gray (#d8d8d8)   color. Color of the icon will be NavyBlue(#120e5b)  . Background can be White (#ffffff)   or LighterGray(#f6f6f6)  .
  • Icon based group button will have 45 px height & width. Each button will be place at zero distance & can be placed horizontally. Ba ckground for each button will be white. Icon color will be SkyBlue(#2991d6)  . Each button will have 1px border with Gray (#d8d8d8)   color. This set of button in desktop on mouse over will dis play the button name as tooltip while in mobile/tablet will collapse in slider where each button will have text underneath it.
  • For any types of buttons, no ac tion will be triggered on mouse over event, it will only happened on click/press event.
  • Except icon based button se t, all other buttons will have round corner with 2px radius.
  • Action will be triggered with placeholder in Icon based buttons.
Button Design Consideration
Fig 4.1.2a above demonstrate the sizes of different types of buttons
Icon text based drop-down button
Fig 4.1.2b Parameters of different types of button set

4.1.3 Behaviour

Different types of buttons have certain behaviour when user performs any action on buttons. Below are the all common behaviour.

Normal State:

It is state behaviour where no action has been done on button. In normal state specification o f the button will remain the same as described in the section 4.1.2 design guideline.

Normal State
Fig 4.1.3a Normal state of different types of button set

Hover State:

Hover state behaviour will occur when user will move cursor over the button. It is a behaviour that will only occur in desktop version where as in mobile/ tablet there will not be hover state

  • Text based button (primary)
  • Background: DarkBlue(#0c79c1) 
  • Border: DarkBlue(#0c79c1) 
  • Font Color: White(#ffffff)  
  • Shadow: Black(#000000)   with 30% opacity.
  • Icon/text based button

For this type of button set, icon placeholder will remain the same while text placeholder behaviour will change as below.

  • Background: White(#ffffff)  
  • Border: DarkBlue(#0c79c1) 
  • Font Color: DarkBlue(#0c79c1) 
  • Shadow: Black(#000000)   with 30% opacity.
  • Text based button (secondary)
  • Background: SkyBlue(#2991d6)  
  • Border: SkyBlue(#2991d6)  
  • Font Color: White(#ffffff)  
  • Shadow: Black(#000000)   with 30% opacity.
  • Icon based button
  • Background: White(#ffffff)  
  • Border: Gray (#d8d8d8)  
  • Icon Color: NavyBlue(#120e5b)  
  • Icon/text based dropdown button

For this type of button set, icon placeholder will remain the same while text & downside arrow placeholder behaviour will change as below.

  • Text placeholder
  • Background: White(#ffffff)  
  • Border: DarkBlue(#0c79c1) 
  • Font Color: DarkBlue(#0c79c1) 
  • Downside arrow placeholder
  • Background: DarkBlue(#0c79c1) 
  • Border: DarkBlue(#0c79c1) 
  • Icon Label: White(#ffffff)  
  • Flat button
  • Text Color: NavyBlue(#120e5b)  
  • Icon based group button
  • Background: SkyBlue(#2991d6)  
  • Icon Label: White(#ffffff)  
  • Border: Gray (#d8d8d8)  
Hover State
Fig 4.1.3b Hover state of different types of button set

Press/Click Event State

Click/press event state behaviour will occur when user will press the button. It is a behaviour that will trigger the action.

  • Text based button (primary)
  • Background: DarkBlue(#0c79c1) 
  • Border: DarkBlue(#0c79c1) 
  • Font Color: White(#ffffff)  
  • Text based button (secondary)
  • Background: SkyBlue(#2991d6)  
  • Border: SkyBlue(#2991d6)  
  • Font Color: White(#ffffff)  
  • Icon/text based button

For this type of button set, icon placeholder will remain the same while text placeholder behaviour will change as below.

  • Background: White(#ffffff)  
  • Border: DarkBlue(#0c79c1) 
  • Font Color: DarkBlue(#0c79c1) 
  • Icon based button
  • Background: White(#ffffff)  
  • Border: Gray (#d8d8d8)  
  • Icon Color: SkyBlue(#2991d6)  
  • Icon/text based dropdown button

For this type of button set, icon placeholder will remain the same while text & downside arrow placeholder behaviour will change as below.

  • Text placeholder
  • Background: White(#ffffff)  
  • Border: DarkBlue(#0c79c1) 
  • Font Color: DarkBlue(#0c79c1) 
  • Downside arrow placeholder
  • Background: White(#ffffff)  
  • Border: DarkBlue(#0c79c1) 
  • Icon color: DarkBlue(#0c79c1) 
  • Flat button
  • Text Color: DarkBlue(#0c79c1) 
  • Icon based group button
  • Background: DarkBlue(#0c79c1) 
  • Icon Color: White(#ffffff)  
  • Border: Gray (#d8d8d8)  
Icon based group button
Fig 4.1.3c Click state of different types of button set

Disable State

Behaviour will remain the intact for this type of button. Below is the design specification for this type of button.

  • Background: LighterGray(#f6f6f6)  
  • Border: LightGray(#e6e6e6)  
  • Font Color: DimGray(#c5c5c5)  

Error/Warning State

Below is the design specification for this type of button.

  • Error State
  • Background: Red(#ff0000)  
  • Border: DarkRed(#cf2619)  
  • Font Color: White(#ffffff)  
Disable State
Fig 4.1.3d Disable/Error/Warning state of different types of button set
  • Warning State
  • Background: Orange(#feaa30)  
  • Border: DarkOrange(#d2881c)  
  • Font Color: White(#ffffff)  

4.1.4 Usage

Each type of buttons has specific use cases. Below are the different use cases for each type of buttons.

  • Text & Icon/Text Based Buttons (Primary/Secondary)

These set of button can be used as primary or secondary action based on the priority of call to action. Mainly these set of buttons can be used in the form design which is shows in the fig 4.1.4

Text & Icon/Text Based Buttons
Fig 4.1.4 Use of text & icon/text based button set.
  • Text/Icon based dropdown button

These set of button can be used mainly in toolbar and panel window heading where main action itself has other action choices. Mainly this set of action will be used in OPS which is shows in the fig 4.1.4a

Text/Icon based dropdown button
Fig 4.1.4a Use of icon/text based dropdown button set.
  • Flat Buttons (Primary/Secondary)

These set of button can be used in modal/non-modal dialog popup where either information needs to pass the user or need to take any feedback. Below fig 4.1.4b demonstrates the use of flat buttons.

Flat Buttons
Fig 4.1.4b Use of text & icon/text based button set.
  • Icon based buttons

These set of button can be used mainly in site header, panel window header, other component like in form where component specific action will occur & have not enough space to accommodate text based actions. These set of action will be used in OPS, Web & mobile application at places where it requires as per the design guidelines specified.

Icon based buttons
Fig 4.1.4c Use of icon/text based dropdown button set.
  • Icon based group button

These set of button can be used in OPS toolbar or can be used as a sticky in the web where sub navigation can be shown.