/

Buttons


Default

PrimarySecondarySuccessDangerWarningInfoLightDark
<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

Button class

Default button styles applied to <a> and <input> elements")

Outline styles

PrimarySecondarySuccessDangerWarningInfoLightDark

Unterschiedliche Größen

SmallDefaultLarge
<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

Block button

Full width using display utility

Block button

Column width

Block button

Multiple block buttons

Block buttonBlock button

Responsive

Block buttonBlock button

Block

Active

Not activeActive

Disabled

Disabled buttonDisabled link

Button Plugin

Toggle buttons

Not activeActiveDisabled

Toggle links

Not activeActiveDisabled
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")