NexJ Logo

Buttons

Description

Use buttons to allow users to take actions on any workspace or dialog.

Variations

Both text and icon buttons are supported. Use text buttons in full-screen and popup dialogs, summary cards (lists), and in data tables for batch commands which appear after at least one record has been selected.

Use icon buttons in data tables for row-level and table-level commands, and in the search pattern.

Interactions

Click a button to open or close a dialog, open a menu, or perform other actions.

Specifications

Detailed specifications

   

ElementStatePrime on light - textWhite on dark - textWhite on dark - iconsGrey on light - icons
TextEnabledRoboto, Medium, 14pt, #07589DRoboto, Medium, 14pt, #FFFFFFMaterial-Design-Iconic-Font, 24 pt, #FFFFFFMaterial-Design-Iconic-Font, 24 pt, #000000, 54%
BackgroundEnablednonenonenonenone
TextDisabledRoboto, Medium, 14pt, #000000, 38%Roboto, Medium, 14pt, #000000, 87%Material-Design-Iconic-Font, 24 pt, #000000, 87%Material-Design-Iconic-Font, 24 pt, #000000, 38%
BackgroundDisablednonenonenonenone
TextHoverRoboto, Medium, 14pt, #07589DRoboto, Medium, 14pt, #FFFFFFMaterial-Design-Iconic-Font, 24 pt, #FFFFFFMaterial-Design-Iconic-Font, 24 pt, #000000, 54%
BackgroundHover#000000, 12%#000000, 12%#000000, 12%#000000,12%
TextFocusedRoboto, Medium, 14pt, #07589DRoboto, Medium, 14pt, #FFFFFFMaterial-Design-Iconic-Font, 24 pt, #FFFFFFMaterial-Design-Iconic-Font, 24 pt, #000000, 54%
BackgroundFocused#000000, 12%#000000, 12%#000000, 12%#000000,12%
TextPressedRoboto, Medium, 14pt, #07589DRoboto, Medium, 14pt, #FFFFFFMaterial-Design-Iconic-Font, 24 pt, #FFFFFFMaterial-Design-Iconic-Font, 24 pt, #000000, 54%
BackgroundPressed#000000, 12%#FFFFFF, 30%#FFFFFF, 30%#000000,12%


Additional reference

Buttons - Material Design