ipl-button

View Source

<ipl-button
    label="Button"
    :disabled="disabled"
    :small="small"
/>
<ipl-button
    label="Button"
    :disabled="disabled"
    :small="small"
    class="no-text-transform"
/>

Preset Colors

View Source

<ipl-button
    label="Button"
    :color="color"
/>

Custom Colors

View Source

<ipl-button
    label="Button"
    :color="color"
/>

Async

View Source

<ipl-button
    label="Success"
    async
    progress-message="Succeeding..."
    success-message="Success!"
    :disable-on-success="disableOnSuccess"
    :color="useConflictingPresetColors ? 'green' : 'blue'"
    @click="asyncSuccess"
/>
<ipl-button
    label="Failure"
    async
    progress-message="Failing..."
    error-message="Failed!"
    :disable-on-success="disableOnSuccess"
    :color="useConflictingPresetColors ? 'red' : 'blue'"
    @click="asyncFailure"
/>

Icon button

View Source

<ipl-button
    icon="brush"
    :small="small"
/>
<ipl-button
    icon="cog"
    color="orange"
    :small="small"
/>

Require confirmation

View Source

<ipl-button
    label="Button"
    requires-confirmation
    :short-confirmation-message="shortConfirmationMessage"
    @click="onClick"
/>

Link

View Source

<ipl-button
    label="Link"
    href="https://iplabs.ink"
    :disabled="disabled"
    :requires-confirmation="requireConfirmation"
    :small="small"
/>
<ipl-button
    icon="link"
    href="https://iplabs.ink"
    :disabled="disabled"
    :requires-confirmation="requireConfirmation"
    :small="small"
/>

Transparent

View Source

<ipl-button
    label="Button"
    :disabled="disabled"
    :small="small"
    color="transparent"
/>
<ipl-button
    label="Async"
    :disabled="disabled"
    :small="small"
    async
    color="transparent"
    @click="asyncSuccess"
/>
<ipl-button
    icon="flask"
    :disabled="disabled"
    :small="small"
    color="transparent"
/>

Custom Content

View Source

<ipl-button
    :disabled="disabled"
    :small="small"
>
    <font-awesome-icon
        icon="file"
        class="icon"
    />
    Custom Content
</ipl-button>

<ipl-button
    v-slot="{ state }"
    requires-confirmation
    :disabled="disabled"
    :small="small"
>
    <font-awesome-icon
        icon="file"
        class="icon"
    />
    {{ state === 'confirm' ? 'Confirm?' : 'Requires Confirmation' }}
</ipl-button>

<ipl-button
    v-slot="{ state }"
    async
    :disabled="disabled"
    :small="small"
    @click="asyncSuccess"
>
    <template v-if="state === 'idle'">
        Async
    </template>
    <template v-else-if="state === 'loading'">
        Working...
    </template>
    <template v-else-if="state === 'success'">
        Done!
    </template>
    <template v-else-if="state === 'error'">
        Error!
    </template>
</ipl-button>