<template>
  <va-row>
    <div class="col-md-12">
        <va-card theme="primary" :isOutline="true" title="Buttons" icon="fa fa-edit">
            <div slot="content" class="table-responsive">
                <p>Various types of buttons base on vue component . Using the base class <code>.btn</code> without <code>btn-block</code></p>
                <table class="table table-bordered text-center">
                    <tbody>
                    <tr>
                        <th>Normal</th>
                        <th>Large <code>.btn-lg</code></th>
                        <th>Small <code>.btn-sm</code></th>
                        <th>X-Small <code>.btn-xs</code></th>
                        <th>Flat <code>.btn-flat</code></th>
                        <th>Disabled <code>.disabled</code></th>
                    </tr>
                    <tr>
                        <td>
                            <va-button
                                    name="Default click"
                                    theme="default"
                                    @btn-click="$Swal.fire('Basic Alert!')"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Default"
                                    theme="default"
                                    size="lg"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Default"
                                    theme="default"
                                    size="sm"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Default"
                                    theme="default"
                                    size="xs"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Default"
                                    theme="default"
                                    :isFlat="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Default"
                                    theme="default"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <va-button
                                    name="Secondary"
                                    theme="secondary"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Secondary"
                                    theme="secondary"
                                    size="lg"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Secondary"
                                    theme="secondary"
                                    size="sm"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Secondary"
                                    theme="secondary"
                                    size="xs"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Secondary"
                                    theme="secondary"
                                    :isFlat="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Secondary"
                                    theme="secondary"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <va-button
                                    name="Primary"
                                    theme="primary"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Primary"
                                    theme="primary"
                                    size="lg"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Primary"
                                    theme="primary"
                                    size="sm"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Primary"
                                    theme="primary"
                                    size="xs"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Primary"
                                    theme="primary"
                                    :isFlat="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Primary"
                                    theme="primary"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <va-button
                                    name="Success"
                                    theme="success"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Success"
                                    theme="success"
                                    size="btn-lg"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Success"
                                    theme="success"
                                    size="sm"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Success"
                                    theme="success"
                                    size="xs"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Success"
                                    theme="success"
                                    :isFlat="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Success"
                                    theme="success"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <va-button
                                    name="Info"
                                    theme="info"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Info"
                                    theme="info"
                                    size="lg"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Info"
                                    theme="info"
                                    size="sm"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Info"
                                    theme="info"
                                    size="xs"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Info"
                                    theme="info"
                                    :isFlat="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Info"
                                    theme="info"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <va-button
                                    name="Danger"
                                    theme="danger"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Danger"
                                    theme="danger"
                                    size="lg"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Danger"
                                    theme="danger"
                                    size="sm"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Danger"
                                    theme="danger"
                                    size="xs"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Danger"
                                    theme="danger"
                                    :isFlat="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Danger"
                                    theme="danger"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <va-button
                                    name="Warning"
                                    theme="warning"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Warning"
                                    theme="warning"
                                    size="lg"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Warning"
                                    theme="warning"
                                    size="sm"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Warning"
                                    theme="warning"
                                    size="xs"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Warning"
                                    theme="warning"
                                    :isFlat="true"
                            ></va-button>
                        </td>
                        <td>
                            <va-button
                                    name="Warning"
                                    theme="warning"
                                    :isDisabled="true"
                            ></va-button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </va-card>
    </div>
</va-row>
</template>

<script>
    export default {
        name: "ButtonsVue",
    }
</script>

<style scoped>

</style>