Button Activity

The btn-activity component provides an interactive button with built-in activity indicators for async operations. It extends the standard button aCombine activity indicators with textarea-field to show a loading icon.s.

Installation

pnpm

pnpm i @vue-interface/btn-activity

yarn

yarn add @vue-interface/btn-activity

npm

npm i @vue-interface/btn-activity

bun

bun i @vue-interface/btn-activity

Basic Usage

<BtnActivity :indicator="Dots" @click="onClick">Dots</BtnActivity>
<BtnActivity :indicator="Spinner" @click="onClick">Spinner</BtnActivity>
<BtnActivity :indicator="Pulse" @click="onClick">Pulse</BtnActivity>

const onClick = (event, { toggle }) => {
    toggle()
    
    setTimeout(() => {
        toggle()
    }, 2000)
}

Dots

Show Code

<BtnActivity :indicator="Dots" size="btn-sm" @click="onClick">Click Me!</BtnActivity>
<BtnActivity :indicator="Dots" size="btn-md" @click="onClick">Click Me!</BtnActivity>
<BtnActivity :indicator="Dots" size="btn-lg" @click="onClick">Click Me!</BtnActivity>

Spinner

Show Code

<BtnActivity :indicator="Spinner" size="btn-sm" @click="onClick">Click Me!</BtnActivity>
<BtnActivity :indicator="Spinner" size="btn-md" @click="onClick">Click Me!</BtnActivity>
<BtnActivity :indicator="Spinner" size="btn-lg" @click="onClick">Click Me!</BtnActivity>

Pulse

Show Code

<BtnActivity :indicator="Pulse" size="btn-sm" @click="onClick">Click Me!</BtnActivity>
<BtnActivity :indicator="Pulse" size="btn-md" @click="onClick">Click Me!</BtnActivity>
<BtnActivity :indicator="Pulse" size="btn-lg" @click="onClick">Click Me!</BtnActivity>

Orientation

Control the position of the activity indicator relative to the button label using the orientation prop.

Show Code

<BtnActivity :indicator="Spinner" orientation="top" @click="onClick">Orientate Top</BtnActivity>
<BtnActivity :indicator="Spinner" orientation="bottom" @click="onClick">Orientate Bottom</BtnActivity>
<BtnActivity :indicator="Spinner" orientation="left" @click="onClick">Orientate Left</BtnActivity>
<BtnActivity :indicator="Spinner" orientation="right" @click="onClick">Orientate Right</BtnActivity>

Block Activity Buttons

Full-width buttons with different indicator orientations using the block prop.

Show Code

<BtnActivity :indicator="Spinner" block orientation="top" @click="onClick">Spinner Top</BtnActivity>
<BtnActivity :indicator="Spinner" block orientation="bottom" @click="onClick">Spinner Bottom</BtnActivity>
<BtnActivity :indicator="Spinner" block orientation="left" @click="onClick">Spinner Left</BtnActivity>
<BtnActivity :indicator="Spinner" block orientation="right" @click="onClick">Spinner Right</BtnActivity>

Variants

Button activity supports all standard button color variants.

Show Code

<BtnActivity :indicator="Spinner" variant="btn-secondary" @click="onClick">btn-secondary</BtnActivity>
<BtnActivity :indicator="Spinner" variant="btn-warning" @click="onClick">btn-warning</BtnActivity>
<BtnActivity :indicator="Spinner" variant="btn-danger" @click="onClick">btn-danger</BtnActivity>
<BtnActivity :indicator="Spinner" variant="btn-success" @click="onClick">btn-success</BtnActivity>

Activity Attribute

Control the activity state programmatically using the activity prop.

Show Code

<BtnActivity :indicator="Spinner" :activity="activity">
  {{ activity ? 'On' : 'Off' }}
</BtnActivity>
<BtnActivity :indicator="Spinner" :activity="activity" :disabled="true">
  {{ activity ? 'On' : 'Off' }}
</BtnActivity>

onMounted(() => {
    const toggle = () => setTimeout(() => {
        activity.value = !activity.value
        toggle()
    }, 1000)
    
    toggle()
})

Disabled State

Buttons can be disabled to prevent user interaction.

Show Code

<BtnActivity :indicator="Spinner" disabled @click="onClick">Spinner</BtnActivity>

Label Attribute

Use the label prop to set button text without using the default slot.

Show Code

<BtnActivity :indicator="Spinner" label="Some Text Here" @click="onClick"></BtnActivity>

Custom Element

Combine slot content with the label attribute and disabled states.

Show Code

<BtnActivity :indicator="Spinner" @click="onClick">Label</BtnActivity>
<BtnActivity :indicator="Spinner" label="Some Text Here" disabled @click="onClick"></BtnActivity>

Click Event

The click event handler receives a toggle function to control the activity state.

Show Code

<BtnActivity :indicator="Spinner" class="btn-primary" @click="onClick">Enabled</BtnActivity>
<BtnActivity :indicator="Spinner" disabled @click="onClick">Disabled</BtnActivity>