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 | – |
| theme | Set the color scheme of the component | light, gray, dark | light |
| disabled | Disables interaction on this element | – | – |
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 size="small">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>