Buttons

Twitter bootstrap Documentation

Examples

Twitter bootstrap Documentation

Result

Source

<?php

foreach (
    [
        'primary', 'secondary', 'success', 'danger',
        'warning', 'info', 'light', 'dark', 'link',
    ] as $variant
) {
    echo $this->formButton()->renderSpec([
        'options' => [
            'label' => ucfirst($variant),
            'variant' => $variant,
        ],
    ]);
}

Button tags

Twitter bootstrap Documentation

Result

Source

<?php


// Link button
echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Link',
        'variant' => 'primary',
        'tag' => 'a',
    ],
    'attributes' => ['href' => '#'],
]);

// Submit button
echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Button',
        'variant' => 'primary',
    ],
    'attributes' => ['type' => 'submit'],
]);

// Input button
echo $this->formButton()->renderSpec([
    'options' => [
        'tag' => 'input',
        'label' => 'Input',
        'variant' => 'primary',
    ],
    'attributes' => ['type' => 'button'],
]);

// Submit input
echo $this->formButton()->renderSpec([
    'options' => [
        'tag' => 'input',
        'label' => 'Submit',
        'variant' => 'primary',
    ],
    'attributes' => ['type' => 'submit'],
]);

// Reset
echo $this->formButton()->renderSpec([
    'options' => [
        'tag' => 'input',
        'label' => 'Reset',
        'variant' => 'primary',
    ],
    'attributes' => ['type' => 'reset'],
]);

Outline buttons

Twitter bootstrap Documentation

Result

Source

<?php

foreach (
    [
        'primary', 'secondary', 'success', 'danger',
        'warning', 'info', 'light', 'dark',
    ] as $variant
) {
    echo $this->formButton()->renderSpec([
        'options' => [
            'label' => ucfirst($variant),
            'variant' => 'outline-' . $variant,
        ],
    ]);
}

Sizes

Twitter bootstrap Documentation

Result

Source

<?php


// Large buttons
echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Large button',
        'variant' => 'primary',
        'size' => 'lg',
    ],
]);


echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Large button',
        'size' => 'lg',
    ],
]);

echo '<br/><br/>';

// Small buttons
echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Small button',
        'variant' => 'primary',
        'size' => 'sm',
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Small button',
        'size' => 'sm',
    ],
]);

Disabled state

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Primary button',
        'variant' => 'primary',
        'size' => 'lg',
    ],
    'attributes' => [
        'disabled' => true,
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Button',
        'size' => 'lg',
    ],
    'attributes' => [
        'disabled' => true,
    ],
]);

echo '<br/><br/>';

echo $this->formButton()->renderSpec([
    'options' => [
        'tag' => 'a',
        'label' => 'Primary link',
        'variant' => 'primary',
        'size' => 'lg',
    ],
    'attributes' => [
        'disabled' => true,
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'tag' => 'a',
        'label' => 'Link',
        'size' => 'lg',
    ],
    'attributes' => [
        'disabled' => true,
    ],
]);

echo '<br/><br/>';

echo $this->formButton()->renderSpec([
    'options' => [
        'tag' => 'a',
        'label' => 'Primary link',
        'variant' => 'primary',
        'size' => 'lg',
    ],
    'attributes' => [
        'href' => '#',
        'disabled' => true,
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'tag' => 'a',
        'label' => 'Link',
        'size' => 'lg',
    ],
    'attributes' => [
        'href' => '#',
        'disabled' => true,
    ],
]);

Block buttons

Twitter bootstrap Documentation

Result

Source

<?php


echo '<div class="d-grid gap-2">';

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Button',
        'variant' => 'primary',
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Button',
        'variant' => 'primary',
    ],
]);

echo '</div>';

echo '<br/><br/>';

echo '<div class="d-grid gap-2 d-md-block">';

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Button',
        'variant' => 'primary',
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Button',
        'variant' => 'primary',
    ],
]);

echo '</div>';

echo '<br/><br/>';

echo '<div class="d-grid gap-2 col-6 mx-auto">';

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Button',
        'variant' => 'primary',
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Button',
        'variant' => 'primary',
    ],
]);

echo '</div>';

echo '<br/><br/>';

echo '<div class="d-grid gap-2 d-md-flex justify-content-md-end">';

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Button',
        'variant' => 'primary',
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Button',
        'variant' => 'primary',
    ],
]);

echo '</div>';

Button plugin

Twitter bootstrap Documentation

Toggle states

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Toggle button',
        'variant' => 'primary',
        'toggle' => false,
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Active toggle button',
        'variant' => 'primary',
        'toggle' => true,
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Disabled toggle button',
        'variant' => 'primary',
        'toggle' => false,
    ],
    'attributes' => [
        'disabled' => true,
    ],
]);

echo '<br/><br/>';

echo $this->formButton()->renderSpec([
    'options' => [
        'tag' => 'a',
        'label' => 'Toggle link',
        'variant' => 'primary',
        'toggle' => false,
    ],
    'attributes' => [
        'href' => '#',
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'tag' => 'a',
        'label' => 'Active toggle link',
        'variant' => 'primary',
        'toggle' => true,
    ],
    'attributes' => [
        'href' => '#',
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'tag' => 'a',
        'label' => 'Disabled toggle link',
        'variant' => 'primary',
        'toggle' => false,
    ],
    'attributes' => [
        'disabled' => true,
        'href' => '#',
    ],
]);