Button

Basic button with icon and loading.

Usage

Import

import { Abutton } from "@agufaui/${framework name}";

Html

<abutton /> or <Abutton />

Configuration

Theme component name: abutton

Showcase

Loading button is disabled automatically
Hover and click button to see different effects

Click to see code

vue

<abutton
	v="Button"
	c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
/>
<abutton
	v="Button"
	t="focus"
	i="i-ph-anchor"
	ic="group-hover:animate-head-shake"
	c="group text-white  bg-gradient-to-br from-green-2 to-green-6 transition-shadow duration-300 hover:via-green-6 focus:(via-green-7 ring-green-5)"
/>
<abutton
	v="Button"
	t="focus"
	:loading="true"
	loadc="text-lg"
	c="text-white bg-amber-6 hover:bg-amber-7 focus:ring-amber-5"
/>
<abutton
	v="Upload"
	t="focus"
	i="i-material-symbols:upload-rounded"
	ipos="right"
	ic="text-lg group-hover:animate-rubber-band"
	c="group text-white bg-lime-6 hover:bg-lime-7 focus:ring-lime-5"
/>
<abutton
	v="Button"
	t="focus"
	vc="group-hover:animate-jello"
	c="group text-indigo-5 border border-indigo-4 hover:bg-indigo-2 focus:ring-indigo-2"
/>
<abutton
	v="Button"
	t="focus"
	vc="group-hover:animate-tada"
	c="group text--1.5 text-purple-5 hover:bg-purple-2 focus:ring-purple-2"
/>
<abutton
	t="focus"
	i="i-material-symbols:edit-document-outline"
	ic="group-hover:animate-jack-in-the-box"
	c="group text-white bg-sky-5 hover:bg-sky-6 focus:ring-sky-5"
	aria-label="Edit"
/>
<abutton
	v="Circle"
	t="circle"
	c="h-2.5rem text-xs text-white bg-gradient-to-r from-purple-3 to-pink-6 disabled:opacity-50 hover:bg-red-6/80 hover:animate-swing focus:(to-red-4 ring-red-3)"
/>
<abutton
	t="circle"
	i="i-ri:delete-bin-6-line"
	ic="text-lg group-hover:animate-bounce-in"
	c="h-2.5rem group text-white bg-orange-6 hover:bg-orange-7 focus:ring-orange-5"
	aria-label="Delete"
/>
<abutton
	t="circle"
	:loading="true"
	loadc="text-lg"
	c="h-2.5rem text-white bg-teal-6 hover:bg-teal-7 focus:ring-teal-5"
	aria-label="Loading"
/>
<abutton
	t="circle"
	i="i-ri:search-line"
	ic="text-lg group-hover:animate-heart-beat"
	c="h-2.5rem group text-gray-4 border border-gray-3 hover:bg-gray-2 focus:ring-gray-3"
	aria-label="Search"
/>
<abutton
	i="i-material-symbols:download-rounded"
	ic="group-hover:animate-bounce"
	c="group text-cyan-5 border border-cyan-4 hover:bg-cyan-2 focus:ring-cyan-2"
	aria-label="Download"
/>
<abutton
	t="circle"
	i="i-ic:outline-email"
	ic="text-xl group-hover:animate-wobble"
	c="group h-2.5rem text-violet-4 hover:bg-violet-2 focus:ring-violet-2"
	aria-label="Email"
/>
<abutton v="Button" t="focusblock" c="text-white bg-sky-5 hover:bg-sky-6 focus:ring-sky-5" />

Slot

One default slot replace button content including icon and loading icon.

AgufaUI provided Theme

CDefaultType is just string constant "default"

import { CDefaultType, CUseType } from "@agufaui/config";
import type { IAButtonProps } from "../../types/basic/AButton";

export const DAButtonDefault = {
	c: "px-4 py-2 rounded-md text-sm font-medium select-none disabled:(opacity-50 cursor-not-allowed)",
};

export const DAButtonFocus = {
	[CUseType]: CDefaultType,
	c: "focus:(outline-none ring-2 ring-offset-2)",
};

export const DAButtonFocusBlock = {
	[CUseType]: "focus",
	c: "block w-full",
};

export const DAButtonCircle = {
	c: "aspect-square rounded-1/2 text-sm font-medium disabled:(opacity-50 cursor-not-allowed) focus:(outline-none ring-2 ring-offset-2)",
};

export const DAButton: Readonly<Record<string, IAButtonProps>> = {
	[CDefaultType]: DAButtonDefault,
	focus: DAButtonFocus,
	focusblock: DAButtonFocusBlock,
	circle: DAButtonCircle,
};

Attributes (Properties)

Default Values

vue

type: "button",
loadi: "i-eos-icons:loading",
spacex: "space-x-1.5",

Unique

export type ButtonType = "button" | "submit" | "reset" | undefined;

export interface IAButtonProps extends IProps, IPropsForm, IPropsComposeX, IPropsLoading {
	type?: ButtonType; // html element button type
	v?: string; // button text.  Not configurable
	vc?: string; // css classes for text element
	loadi?: string; // loading icon eg. i-eos-icons:loading
	loadc?: string; // css classes for loading icon element
}

Inherit from IProps

export interface IProps {
	t?: string; // user defined or AgufaUI provided component type.  Not configurable
	c?: string; // css classes for component root html element
}

Inherit from IPropsForm

export interface IPropsForm {
	disabled?: boolean; // disabled
}

Inherit from IPropsComposeX

export interface IPropsComposeX {
	spacex?: string; // space between elements in x-axis eg. space-x-1.5
}

Inherit from IPropsIcon

export type TLRPosition = "left" | "right";

export interface IPropsIcon {
	i?: string; // icon eg. i-eos-icons:loading
	ipos?: TLRPosition; // icon position
	ic?: string; // css classes for icon element
}

Inherit from IPropsLoading

export interface IPropsLoading extends IPropsIcon {
	loading?: boolean; // loading
}

Events

export interface IAButtonEmits {
	(e: "click", event: MouseEvent): void; // click event
}

Button #

Usage #

Import #

Html #

Configuration #

Showcase #

Slot #

AgufaUI provided Theme #

Attributes (Properties) #

Default Values #

Unique #

Inherit from IProps #

Inherit from IPropsForm #

Inherit from IPropsComposeX #

Inherit from IPropsIcon #

Inherit from IPropsLoading #

Events #