Buttons

Raised Button

When the layout is busy and varied, using raised buttons will help emphasize the functions. In most situations, there should be only one primary button assigned to the most relevant action, and all other buttons will be secondary. Actions with a risk potential (such as delete, terminate, etc.) should use the negative style, to reduce the chance of mistakenly hitting them. 

height: 32px;

width: 155px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #010101;

height: 32px;

width: 74px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #010101;

Button types

height: 32px;

width: 87px;

border-radius: ;

border: 1px #000000;

background: #e5004c;

opacity: 1;

color: #010101;

height: 32px;

width: 98px;

border-radius: ;

border: 1px SOLID #4c4e50;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 81px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #010101;

Button sizes

height: 40px;

width: 73px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #010101;

height: 32px;

width: 80px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #010101;

height: 24px;

width: 55px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #010101;

States

height: 32px;

width: 109px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 100px;

border-radius: ;

border: 1px #000000;

background: #0053ac;

opacity: 1;

color: #010101;

height: 32px;

width: 91px;

border-radius: ;

border: 1px #000000;

background: #0066cc;

opacity: 1;

color: #010101;

height: 32px;

width: 99px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #010101;

height: 32px;

width: 109px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 100px;

border-radius: ;

border: 1px SOLID #4c4e50;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 91px;

border-radius: ;

border: 1px SOLID #4c4e50;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 99px;

border-radius: ;

border: 1px SOLID #4c4e50;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 109px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 100px;

border-radius: ;

border: 1px #000000;

background: #a30036;

opacity: 1;

color: #010101;

height: 32px;

width: 91px;

border-radius: ;

border: 1px #000000;

background: #c20040;

opacity: 1;

color: #010101;

height: 32px;

width: 99px;

border-radius: ;

border: 1px #000000;

background: #e5004c;

opacity: 1;

color: #010101;

Flat Button​

Flat buttons have no background or border in their default state, making them less prominent than the raised buttons. They are used widely across the screens and can have a leading icon or just text.

height: 32px;

width: 144px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 62px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Button types

height: 32px;

width: 76px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 86px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 70px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Button sizes

height: 40px;

width: 65px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 69px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 24px;

width: 51px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

States

height: 32px;

width: 97px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 89px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #000000;

height: 32px;

width: 80px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #000000;

height: 32px;

width: 88px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 97px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 88px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 79px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 87px;

border-radius: ;

border: 1px SOLID #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 97px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 32px;

width: 89px;

border-radius: ;

border: 1px #000000;

background: #e5004c;

opacity: 1;

color: #000000;

height: 32px;

width: 80px;

border-radius: ;

border: 1px #000000;

background: #e5004c;

opacity: 1;

color: #000000;

height: 32px;

width: 88px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Icon Button

Icon buttons can be square, circular or flat. The states for these buttons are the same as their text button counterparts (raised and flat).

Primary

height: 32px;

width: 32px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

height: 32px;

width: 32px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: ;

height: 32px;

width: 32px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: ;

Secondary 

height: 32px;

width: 32px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

height: 32px;

width: 32px;

border-radius: ;

border: 1px SOLID #4c4e50;

background: #000000;

opacity: 1;

color: ;

height: 32px;

width: 32px;

border-radius: ;

border: 1px SOLID #4c4e50;

background: #000000;

opacity: 1;

color: ;

Negative

height: 32px;

width: 32px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

height: 32px;

width: 32px;

border-radius: ;

border: 1px #000000;

background: #e5004c;

opacity: 1;

color: ;

height: 32px;

width: 32px;

border-radius: ;

border: 1px #000000;

background: #e5004c;

opacity: 1;

color: ;

Button sizes

height: 147px;

width: 184px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 147px;

width: 184px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 147px;

width: 184px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Toggle Button

height: 32px;

width: 75px;

border-radius: 2;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

States

height: 67px;

width: 77px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 67px;

width: 90px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 67px;

width: 77px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 67px;

width: 77px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 67px;

width: 77px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Radio Button Group

Added in the latest release

Radio buttons or single-select allow the user to select only one of the options available from the group. They can be composed of text or icons, and it is not recommended to mix both in the same button group.
The secondary or neutral variant should be used in most cases, while the primary style can be applied in cases where more emphasis is needed.

Primary / Emphasis

height: 32px;

width: 98px;

border-radius: 2;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

height: 32px;

width: 150px;

border-radius: 2;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Secondary / Neutral

height: 32px;

width: 98px;

border-radius: 2;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

height: 32px;

width: 150px;

border-radius: 2;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Check Button Group

Updated in the latest release

As the name implies, check buttons or multi-select will allow users to check or uncheck any options available in the group. Similar to the radio button group, the check button can be either made of text or icons and will also have a neutral style and a primary one for emphasis.

Primary / Emphasis

height: 32px;

width: 144.00390625px;

border-radius: 2;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: ;

height: 32px;

width: 283.00402832031px;

border-radius: 2;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #010101;

Secondary / Neutral

height: 32px;

width: 144.00390625px;

border-radius: 2;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

height: 32px;

width: 283.00402832031px;

border-radius: 2;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Drop us a line

helloux@microfocus.com

© Copyright 2021 Micro Focus or one of its affiliates

Contribute  |  Updates