UI MarCom

Button Stable Dark theme

Buttons attract users’ attention for actions. Different hierarchy levels of buttons are used to achieve the desired loudness level of attraction.

<uimc-button>Button</uimc-button>

AttributeDescriptionValuesDefault
primaryAdd this to show a primary button
typeType of the button.normal, control, linknormal
sizeSize of the button.normal, smallnormal
iconAdd an optional icon.name of the icon

Standard button

Button
Button
<uimc-button>Button</uimc-button>
<uimc-button icon="plus">Button</uimc-button>

Control button

Up
<uimc-button type="control" icon="arrow-up-large">Up</uimc-button>

Text button

Button
<uimc-button type="link" icon="link-intern">Button</uimc-button>

Small button

Button
<uimc-button>Button</uimc-button>

Primary button

Button
Button
<uimc-button primary>Button</uimc-button>
 <uimc-button primary icon="plus">Button</uimc-button>

Button Group

DownloadButtonSubmit
<div class="button-group">
<uimc-button icon="download">Download</uimc-button>
<uimc-button>Button</uimc-button>
<uimc-button primary>Submit</uimc-button>
</div>