<div class="uk-section uk-height-viewport uk-flex uk-flex-middle">
    <div class="uk-container">

        <div uk-grid>
            <div class="uk-width-1-4@s">
                <button class="uk-button uk-button-default">Button</button>
            </div>
            <div class="uk-width-auto@s">
                <button class="uk-button uk-button-default" disabled>Disabled</button>
            </div>
            <div class="uk-width-auto@s">
                <div class="uk-button-group">
                    <button class="uk-button uk-button-default">Button</button>
                    <button class="uk-button uk-button-default">Button</button>
                    <button class="uk-button uk-button-default">Button</button>
                </div>
            </div>
        </div>

        <div uk-grid>
            <div class="uk-width-1-4@s">
                <button class="uk-button uk-button-primary">Primary</button>
            </div>
            <div class="uk-width-auto@s">
                <button class="uk-button uk-button-primary" disabled>Disabled</button>
            </div>
            <div class="uk-width-auto@s">
                <div class="uk-button-group">
                    <button class="uk-button uk-button-primary">Button</button>
                    <button class="uk-button uk-button-primary">Button</button>
                    <button class="uk-button uk-button-primary">Button</button>
                </div>
            </div>
        </div>

        <div uk-grid>
            <div class="uk-width-1-4@s">
                <button class="uk-button uk-button-secondary">Secondary</button>
            </div>
            <div class="uk-width-auto@s">
                <button class="uk-button uk-button-secondary" disabled>Disabled</button>
            </div>
            <div class="uk-width-auto@s">
                <div class="uk-button-group">
                    <button class="uk-button uk-button-secondary">Button</button>
                    <button class="uk-button uk-button-secondary">Button</button>
                    <button class="uk-button uk-button-secondary">Button</button>
                </div>
            </div>
        </div>

        <div uk-grid>
            <div class="uk-width-1-4@s">
                <button class="uk-button uk-button-danger">Danger</button>
            </div>
            <div class="uk-width-auto@s">
                <button class="uk-button uk-button-danger" disabled>Disabled</button>
            </div>
            <div class="uk-width-auto@s">
                <div class="uk-button-group">
                    <button class="uk-button uk-button-danger">Button</button>
                    <button class="uk-button uk-button-danger">Button</button>
                    <button class="uk-button uk-button-danger">Button</button>
                </div>
            </div>
        </div>

        <hr>

        <div uk-grid>
            <div class="uk-width-auto@s">
                <button class="uk-button uk-button-text">Text</button>
                <button class="uk-button uk-button-text uk-margin-left" disabled>Disabled</button>
            </div>
            <div class="uk-width-auto@s">
                <button class="uk-button uk-button-link">Link</button>
                <button class="uk-button uk-button-link uk-margin-left" disabled>Disabled</button>
            </div>
        </div>

        <hr>

        <div class="uk-flex-middle" uk-grid>
            <div class="uk-width-auto@s">
                <button class="uk-button uk-button-primary uk-button-large">Large</button>
            </div>
            <div class="uk-width-auto@s">
                <button class="uk-button uk-button-primary">Default</button>
            </div>
            <div class="uk-width-auto@s">
                <button class="uk-button uk-button-primary uk-button-small">Small</button>
            </div>
        </div>

    </div>
</div>
