vue-input-components

Action Component

A versatile button component that can be used as a regular button or a link, with support for icons and different styles.

Props

Prop Type Default Description
id string undefined Unique identifier for the action
icon string undefined Icon name from Font Awesome
label string undefined Button text label
href string undefined URL for link behavior
type 'button' \| 'submit' \| 'reset' 'button' Button type
disabled boolean false Whether the button is disabled
color string 'var(--text-color)' Button color
size 'small' \| 'regular' \| 'large' 'regular' Button size
variant 'solid' \| 'transparent' 'solid' Button style variant
presentation 'default' \| 'minimal' 'default' Visual presentation style

Events

Event Parameters Description
click (event: MouseEvent, action: ActionProps) Emitted when the button is clicked

Usage Example

<template>
  <Action id="save" label="Save" icon="save" color="var(--primary-color)" @click="handleClick" />
</template>

<script setup lang="ts">
import Action from '@/components/Action.vue'
import type { ActionProps } from '@/types'

const handleClick = (event: MouseEvent, action: ActionProps) => {
  console.log('Button clicked:', action.id)
}
</script>

Features