Button.vue component dynamically renders either a <button> or a <Link> element based on the href prop. It can be styled as solid, hollow, or text-based and supports different sizes and loading states.
Features
Dynamic Rendering
Renders as a
<button> or <Link> element based on the href prop.Flexible Styling
Supports solid, hollow, and text-based styles with customizable sizes.
Slots for Customization
Includes slots for icons and custom content, allowing dynamic layouts.
Loading States
Handles loading states with a
processingLabel and disabled interaction.Variants
Offers multiple variants like huge, hollow, text, and small buttons for diverse use cases.
Basic Button
Props
string | boolean
default:"false"
Disables the button if set to
true.string
default:"'button'"
Determines the button’s style. Options:
button, text, hollow.string | object
default:"''"
If set, renders the button as a
<Link /> element with the given value.string
default:"''"
Adjusts the button’s size. Options:
small, huge.boolean
default:"false"
Applies secondary styling when
true.boolean
default:"false"
Indicates a loading state.
string
default:"'Saving...'"
Text to display while in the
processing state.Slots
slot
Main content of the button.
slot
Content (e.g., icon) to be displayed to the left of the button label.
<template #iconLeft></template>slot
Content (e.g., icon) to be displayed to the right of the button label.
<template #iconRight></template>Variants
Button Variants
- Default Button:
<Button>(solid by default). - Hollow Button:
<ButtonHollow>(outlined style). - Huge Button:
<ButtonHuge>(larger size). - Text Button:
<ButtonText>(minimal text-based button). - Small Button:
<ButtonSmall>(smaller size).
Examples
Basic Text Button
Text Button with Icons
Small Buttons
Processing State
Hollow Buttons
Huge Buttons
Notes
- For navigation purposes, ensure valid
hrefvalues are provided forButtonorButtonHollow. - Buttons in the
processingstate will display theprocessingLabeland disable interaction. - Customize the component styles by modifying or extending the underlying CSS classes.