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.

Usage Code

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

Attribute	Description	Values	Default
primary	Add this to show a primary button	–	–
type	Type of the button.	`normal`, `control`, `link`	`normal`
size	Size of the button.	`normal`, `small`	`normal`
icon	Add an optional icon.	name of the icon	–
theme	Set the color scheme of the component	`light`, `gray`, `dark`	`light`
disabled	Disables interaction on this element	–	–

Callback	Argument	Description
onClick	event	Callback function that gets triggered when the button is clicked

Standard button

Button

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

Control button

<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 size="small">Button</uimc-button>

Primary button

Button

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

Button Group

Download

Button

Submit

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