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>
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 | – |
Standard 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
<uimc-button type="link" icon="link-intern">Button</uimc-button>
Small button
<uimc-button>Button</uimc-button>
Primary button
<uimc-button primary>Button</uimc-button>
<uimc-button primary icon="plus">Button</uimc-button>
Button Group
<div class="button-group">
<uimc-button icon="download">Download</uimc-button>
<uimc-button>Button</uimc-button>
<uimc-button primary>Submit</uimc-button>
</div>