Raised Button‚Äč

The raised buttons are rectangular shaped. When the layout is busy and varied, using raised buttons will help to emphasize the functions. There should be only one primary button and one neutral button present on screen at any given state. All other actions 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.¬†

Primary

height: 24px;

width: 55px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 73px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 110px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 88px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Secondary 

height: 24px;

width: 55px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 73px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 130px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 108px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Neutral

height: 24px;

width: 55px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 73px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 106px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 84px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Negative

height: 24px;

width: 55px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 73px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 117px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 95px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Flat Button‚Äč

Primary

height: 24px;

width: 51px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 40px;

width: 65px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 98px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 76px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Secondary 

height: 24px;

width: 51px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 40px;

width: 65px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 118px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 96px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Negative

height: 24px;

width: 51px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 40px;

width: 65px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 105px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 83px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Button States

height: 32px;

width: 84px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 84px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 84px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 84px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 74px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 74px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 74px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 74px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 85px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 85px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 85px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 85px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 94px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 94px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 94px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 94px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Icon Button

Primary

height: 32px;

width: 32px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 32px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 32px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Secondary 

height: 32px;

width: 32px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 32px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 32px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Neutral

height: 32px;

width: 32px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 32px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Negative

height: 32px;

width: 32px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 32px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 32px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Button Group

Check Button Group

height: 32px;

width: 147px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 235px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Segmented Controls 

height: 32px;

width: 98px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 211px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Floating Button

Floating Primary & Icon Button

height: 32px;

width: 80px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

height: 32px;

width: 32px;

border-radius: TBD;

border: TBD;

background: TBD;

opacity: 1;

color: TBD;

Questions? Drop us a line
© Copyright 2021 Micro Focus or one of its affiliates