/
Buttons
Default
<uim-button color="primary">Primary</uim-button>
<uim-button color="secondary">Secondary</uim-button>
<uim-button color="success">Success</uim-button>
<uim-button color="danger">Danger</uim-button>
<uim-button color="warning">Warning</uim-button>
<uim-button color="info">Info</uim-button>
<uim-button color="light">Light</uim-button>
<uim-button color="dark">Dark</uim-button>
<button class="btn btn-primary" aria-pressed="false" type="button">Primary</button>
<button class="btn btn-secondary" aria-pressed="false" type="button">Secondary</button>
<button class="btn btn-success" aria-pressed="false" type="button">Success</button>
<button class="btn btn-danger" aria-pressed="false" type="button">Danger</button>
<button class="btn btn-warning" aria-pressed="false" type="button">Warning</button>
<button class="btn btn-info" aria-pressed="false" type="button">Info</button>
<button class="btn btn-light" aria-pressed="false" type="button">Light</button>
<button class="btn btn-dark" aria-pressed="false" type="button">Dark</button>
Links
<uim-button color="link">Link</uim-button>
<div><button class="btn btn-link" aria-pressed="false" type="button">Link</button></div>
Button class
Default button styles applied to <a>
and <input>
elements")
Outline styles
Unterschiedliche Größen
<uim-button color="secondary" size="sm">Small</uim-button>
<uim-button color="secondary">Default</uim-button>
<uim-button color="secondary" size="lg">Large</uim-button>
<button class="btn btn-secondary btn-sm" aria-pressed="false" type="button">Small</button>
<button class="btn btn-secondary" aria-pressed="false" type="button">Default</button>
<button class="btn btn-secondary btn-lg" aria-pressed="false" type="button">Large</button>
Block
Full width using sizing utility
Full width using display utility
Column width
Multiple block buttons
Responsive
Block
Button Plugin
UIMButton(["color":"primary"], ["data-bs-toggle":"button", "autocomplete":"off"], "Not active"),
UIMButton(["color":"primary", "active"], ["data-bs-toggle":"button", "autocomplete":"off", "aria-pressed":"true"], "Active"),
UIMButton(["color":"primary"], ["data-bs-toggle":"button", "autocomplete":"off","disabled":"disabled"], "Disabled"),
H5A(["btn", "btn-primary"], ["href":"#", "role":"button", "data-bs-toggle":"button"], "Not active"),
H5A(["btn", "btn-primary", "active"], ["href":"#", "role":"button", "data-bs-toggle":"button", "aria-pressed":"true"], "Active"),
H5A(["btn", "btn-primary", "disabled"], ["href":"#", "role":"button", "data-bs-toggle":"button"], "Disabled")