Play UIButton
Common operation buttons.
Usage
mode
The most commonly used button styles.
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button mode="solid">
solid
</pl-button>
<pl-button mode="outline">
outline
</pl-button>
<pl-button mode="ghost">
ghost
</pl-button>
<pl-button mode="link">
link
</pl-button>
<pl-button mode="white">
white
</pl-button>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button mode="solid">
solid
</pl-button>
<pl-button mode="outline">
outline
</pl-button>
<pl-button mode="ghost">
ghost
</pl-button>
<pl-button mode="link">
link
</pl-button>
<pl-button mode="white">
white
</pl-button>
</div>
</div>
</template>size
Buttons stacked small to large sizes.
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button mode="solid" size="mini">
mini
</pl-button>
<pl-button mode="solid" size="small">
small
</pl-button>
<pl-button mode="solid" size="medium">
medium
</pl-button>
<pl-button mode="solid" size="large">
large
</pl-button>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button mode="solid" size="mini">
mini
</pl-button>
<pl-button mode="solid" size="small">
small
</pl-button>
<pl-button mode="solid" size="medium">
medium
</pl-button>
<pl-button mode="solid" size="large">
large
</pl-button>
</div>
</div>
</template>state
Predefined button state.
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button state="primary">
primary
</pl-button>
<pl-button state="info">
info
</pl-button>
<pl-button state="success">
success
</pl-button>
<pl-button state="warning">
warning
</pl-button>
<pl-button state="danger">
danger
</pl-button>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button state="primary">
primary
</pl-button>
<pl-button state="info">
info
</pl-button>
<pl-button state="success">
success
</pl-button>
<pl-button state="warning">
warning
</pl-button>
<pl-button state="danger">
danger
</pl-button>
</div>
</div>
</template>shape
Predefined the shape of the button.
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button shape="rounded">
rounded
</pl-button>
<pl-button shape="pilled">
pilled
</pl-button>
<pl-button shape="circle">
circle
</pl-button>
<pl-button shape="plain">
plain
</pl-button>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button shape="rounded">
rounded
</pl-button>
<pl-button shape="pilled">
pilled
</pl-button>
<pl-button shape="circle">
circle
</pl-button>
<pl-button shape="plain">
plain
</pl-button>
</div>
</div>
</template>icon
Predefined the icon of the button.
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button icon-left="airplane">
airplane
</pl-button>
<pl-button icon-right="browser-chrome">
browser-chrome
</pl-button>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button icon-left="airplane">
airplane
</pl-button>
<pl-button icon-right="browser-chrome">
browser-chrome
</pl-button>
</div>
</div>
</template>disabled
You can use the disabled attribute to define whether the button is disabled.
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button disabled mode="solid">
solid
</pl-button>
<pl-button disabled mode="outline">
outline
</pl-button>
<pl-button disabled mode="ghost">
ghost
</pl-button>
<pl-button disabled mode="link">
link
</pl-button>
<pl-button disabled mode="white">
white
</pl-button>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button disabled mode="solid">
solid
</pl-button>
<pl-button disabled mode="outline">
outline
</pl-button>
<pl-button disabled mode="ghost">
ghost
</pl-button>
<pl-button disabled mode="link">
link
</pl-button>
<pl-button disabled mode="white">
white
</pl-button>
</div>
</div>
</template>Props
| Name | Type | Default | Description |
|---|---|---|---|
| mode | solid | white | outline | ghost | link | solid | Set button style. |
| type | button | reset | submit | button | Set native type attribute. |
| shape | rounded | pilled | circle | plain | rounded | Set button shape. |
| size | small | medium | large | medium | Set button size. |
| state | info | success | warning | danger | info | Set button state. |
| iconLeft | Bootstrap Icons | '' | Set button left icon. |
| iconRight | Bootstrap Icons | '' | Set button right icon. |
| disabled | boolean | false | Disable the button. |
Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | Customize default content. |