Button

Allows users to perform actions and make choices with a single tap

Installation

npm

npm add @heroui-vue/button

pnpm

pnpm add @heroui-vue/button

yarn

yarn add @heroui-vue/button

bun

bun add @heroui-vue/button

NOTE

If you use global installation, you can skip this installation step

Import

On-demand import

import { Button } from '@heroui-vue/button'

Global import

import { Button } from 'heroui-vue'

Usage

PreviewSource Code

Disabled

Button will be unclickable

PreviewSource Code

Sizes

Display buttons in different sizes

PreviewSource Code

Radius

Display buttons with different border radius

PreviewSource Code

Colors

Display buttons in different colors

PreviewSource Code

Variants

Display different types of buttons

PreviewSource Code

Loading

Pass the isLoading prop to show a Spinner component inside the button.

WARNING

Work in progress

You can also customize the loading spinner by passing a custom component to the spinner slot.

PreviewSource Code

The spinner slot is displayed at the start position of the button by default, you can also display custom components at the end position of the button by specifying spinnerPlacement.

PreviewSource Code

With Icons

You can add icons by passing the startContent or endContent slots.

PreviewSource Code

Icon Only

You can also display a button without text by passing the isIconOnly prop and the desired icon as the default child.

PreviewSource Code

Custom Styles

You can customize the Button component by passing custom Tailwind CSS classes to the component slots.

PreviewSource Code

Disable Ripple

Button will not show ripple effect when pressed

PreviewSource Code

Disable Animation

Button will not show animation effect when pressed

PreviewSource Code

Data Attributes

Button has the following attributes on the base element:

• data-hover: When the button is being hovered. Based on useElementHover
• data-focus: When the button is being focused. Based on useFocus.
• data-focus-visible: Not supported yet, default to false.
• data-disabled: When the button is disabled. Based on isDisabled prop.
• data-pressed: When the button is pressed. Based on useMousePressed
• data-loading: When the button is loading. Based on isLoading prop.

Accessibility

INFO

Some features may not be perfect, if you find any problems, please submit an issue

• Button has role of button(Not supported yet, plan to support).
• Keyboard event support for and keys.
• Mouse and touch event handling, and press state management.
• Keyboard focus management and cross browser normalization.

❤️From HeroUI: We recommend to read this blog post about the complexities of building buttons that work well across devices and interaction methods.

API

Button Props

Name	Type	Default	Description
variant	"solid" | "bordered" | "light" | "flat" | "faded" | "shadow" | "ghost"	"solid"	The button appearance style.
color	"default" | "primary" | "secondary" | "success" | "warning" | "danger"	"default"	The button color theme.
size	"sm" | "md" | "lg"	"md"	The Button size
radius	"none" | "sm" | "md" | "lg" | "full"	"md"	The button border radius.
spinnerPlacement	"start" | "end"	"start"	The spinner placement.
fullWidth	boolean	false	Whether the button should take the full width of its parent.
isIconOnly	boolean	false	Whether the button should have the same width and height.
isDisabled	boolean	false	Whether the button is disabled.
isLoading	boolean	false	Whether the button is loading.
disableRipple	boolean	false	Whether the button should display a ripple effect on press.
disableAnimation	boolean	false	Whether the button should display animations.

Button Slots

Name	Scope	Description
default	-	The default slot.
startContent	-	The start content slot.
endContent	-	The end content slot.
spinner	-	The spinner slot.

Button Events (WIP)

Name	Type	Default
press	(e: PressEvent) => void	-
pressStart	(e: PressEvent) => void	-
pressEnd	(e: PressEvent) => void	-
pressChange	(isPressed: boolean) => void	-
pressUp	(e: PressEvent) => void	-
keyDown	(e: KeyboardEvent) => void	-
keyUp	(e: KeyboardEvent) => void	-