Buttons – Framework Docs

Varianten

UIkit stellt mehrere semantische Button-Varianten bereit. Die Klassen werden auf <button>- oder <a>-Elemente angewendet.

HTML

<button class="uk-button uk-button-default">Default</button>
<button class="uk-button uk-button-primary">Primary</button>
<button class="uk-button uk-button-secondary">Secondary</button>
<button class="uk-button uk-button-danger">Danger</button>
<button class="uk-button uk-button-text">Text</button>
<button class="uk-button uk-button-link">Link</button>

Größen

HTML

<button class="uk-button uk-button-primary uk-button-large">Large</button>
<button class="uk-button uk-button-primary">Default</button>
<button class="uk-button uk-button-primary uk-button-small">Small</button>

Mit Icons

Font Awesome Icons können einfach in Buttons integriert werden:

HTML

<button class="uk-button uk-button-primary">
    <i class="fa-solid fa-plus" style="margin-right:.4rem;"></i>
    Neu erstellen
</button>

<!-- Icon-only Button -->
<button class="uk-button uk-button-default" title="Einstellungen">
    <i class="fa-solid fa-gear"></i>
</button>

Zustände

HTML

<button class="uk-button uk-button-primary" disabled>Deaktiviert</button>

<!-- Loading State (jQuery) -->
<button class="uk-button uk-button-primary" id="save-btn">Speichern</button>

<script>
$('#save-btn').on('click', function() {
    $(this).html('<i class="fa-solid fa-spinner fa-spin"></i> Lädt...').prop('disabled', true);
    // Nach Fertigstellung:
    // $(this).html('Speichern').prop('disabled', false);
});
</script>

Button-Gruppe

HTML

<div class="uk-button-group">
    <button class="uk-button uk-button-default">Links</button>
    <button class="uk-button uk-button-default">Mitte</button>
    <button class="uk-button uk-button-default">Rechts</button>
</div>

Volle Breite

HTML

<button class="uk-button uk-button-primary uk-width-1-1">Volle Breite</button>