Skip to content
On this page

Button

The AButton component extend the standard html button with the support of various styles, states and size.

Import

js
import { AButton } from 'ayovue'
import 'ayovue/themes/default/button.css'

Playground



variant
loaderClass
size
<AButton>Click me</AButton>

Props

Button component has the following props.

Prop nameTypeRequiredDefault valueDetails
outlinedBooleanNofalseAdd a border class without a background initially.
raisedBooleanNofalseAdd a shadow to indicate elevation.
roundedBooleanNofalseAdd a circular border radius to the button.
flatBooleanNofalseRemove border radius.
textBooleanNofalseShow button as text without a background and border.
iconBooleanNofalseShow icon type button
loadingBooleanNofalseWhether the button is in loading state.
blockBooleanNofalseShow button with 100% width
disabledBooleanNofalseTo disable the button
loader-classStringNoa-loadingSet the class name of loder element
variantStringNoprimaryDefines the color variant of the button which has the following values:
primary, secondary, success, info, warning , danger
sizeNumberNo16Defines the size of the button.

Slots

Button component has the following slots.

Slot nameDescriptionProps
defaultContent of the button component.N/A

Events

Button component supports all native events.

Released under the MIT License.