Skip to main content
The 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

import { Button } from '@robojuice/velure-ui';

<Button>Button</Button>
<Button secondary>Button Secondary</Button>

​
Props

​
disabled
string | boolean
default:"false"
Disables the button if set to true.
​
kind
string
default:"'button'"
Determines the button’s style. Options: button, text, hollow.
​
href
string | object
default:"''"
If set, renders the button as a <Link /> element with the given value.
​
size
string
default:"''"
Adjusts the button’s size. Options: small, huge.
​
secondary
boolean
default:"false"
Applies secondary styling when true.
​
processing
boolean
default:"false"
Indicates a loading state.
​
processingLabel
string
default:"'Saving...'"
Text to display while in the processing state.

​
Slots

​
default
slot
Main content of the button.
​
iconLeft
slot
Content (e.g., icon) to be displayed to the left of the button label. <template #iconLeft></template>
​
iconRight
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

import { ButtonText } from '@robojuice/velure-ui';

<ButtonText>Button Text</ButtonText>
<ButtonText secondary>Button Text</ButtonText>

​
Text Button with Icons

<ButtonText secondary>
  <template #iconLeft>
    <IconUpload />
  </template>
  Button Text - Icon
  <template #iconRight>
    <IconUpload />
  </template>
</ButtonText>

​
Small Buttons

import { ButtonSmall } from '@robojuice/velure-ui';

<ButtonSmall>Button Text</ButtonSmall>

​
Processing State

<Button :processing="true" :processing-label="`Processing...`">
Button Hollow
</Button>

​
Hollow Buttons

import { ButtonHollow } from '@robojuice/velure-ui';

<ButtonHollow>Button Hollow</ButtonHollow>

​
Huge Buttons

import { ButtonHuge } from '@robojuice/velure-ui';

<ButtonHuge>Button Huge</ButtonHuge>

​
Notes

  • For navigation purposes, ensure valid href values are provided for Button or ButtonHollow.
  • Buttons in the processing state will display the processingLabel and disable interaction.
  • Customize the component styles by modifying or extending the underlying CSS classes.