Skip to content

KButton

Commonly used button.

Install

bash
pnpm add @ikun-ui/button
bash
yarn add @ikun-ui/button
bash
npm install @ikun-ui/button

Basic usage

Use type, round and circle to define Button's style.

Plain Button

When you set the plain property to true, plain buttons will be rendered.

Ghost Button

When you set the ghost property to true, ghost buttons will be rendered.

TIP

Ghost Button takes precedence over Plain Button

Disabled Button

Use disabled attribute to determine whether a button is disabled.
It accepts a Boolean value.

Icon Button

Use the icon attribute to add icon.

Button Size

Use the size property to control the button size. It supports enumerations such as md, sm, and lg.

Button Border

Use the isBorder property to determine if the button is bordered.

TIP

Applies only to plain button

Button Group

Displayed as a button group, can be used to group a series of similar operations.

Use tag <KButtonGroup> to group your buttons.

Use the to attribute to set a specific url that you can click to jump to.

Button Props

NameTypeDefaultDescription
typeprimary / success / error / warning / infoprimary'Button type
size'sm' / 'md' / 'lg'mdButton size
iconstring-The class name of the icon, following the unocss standard
iconSizenumber-The icon size of the button
tostring-Determine whether it's a link button
roundstring / number-Button's border radius
circlebooleanfalseDetermine whether it's a circle button
isBorderbooleanfalseBorder style button
plainbooleanfalseDetermine whether it's a plain button
ghostbooleanfalseDetermine whether it's a ghost button
disabledbooleanfalseDisable the button
clsstring-Additional class for component
attrsRecord<string, string>{}Additional attributes

Button Events

NameDescriptionType
clickEvent fired when the button is clicked(e: Event)=> void

Button Slots

NameDescription
defaultCustomize default content

Button Group Props

NameTypeDefaultDescription
typeprimary / success / error / warning / infofalseButtons type.
size'sm' / 'md' / 'lg'mdButtons size. It will cover button size.
iconSizenumber-The icon size of the buttons. It will cover button iconSize.
isBorderbooleanfalseBorder style buttons. If true, will override the button's isBorder.
disabledbooleanfalseDisable buttons. If true, will override the button's disabled.
clsstring-Additional class for component
attrsRecord<string, string>{}Additional attributes

MIT Licensed