Button Builder Demo

Button Configuration

Button Text

Color

Size

Variant

Icon (optional)

Loading State

Disabled State

Add custom data attributes to the button element

Click count: 0

Last clicked: Never

Vue Component Code

<UButton
  size="lg"
  data-testid="demo-button"
  @click="handleClick"
>
  Test Button
</UButton>

Quick preview of different combinations

Size variations