Play UIButton Group
Displayed as a button group, can be used to group a series of similar operations.
Usage
type
Button group type, which overrides the type of button. The default is solid.
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group mode="solid">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="white">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group mode="solid">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="white">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template>state
Button group state, which overrides the state of button. The default is info.
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group mode="solid">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group state="warning">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline" state="success">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline" state="danger">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group mode="solid">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group state="warning">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline" state="success">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline" state="danger">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template>shapes
Button group shape, which overrides the shape of button. The default is rounded.
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="white" shape="plain">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline" shape="pilled">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="white" shape="plain">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group mode="outline" shape="pilled">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template>size
Button group size, which overrides the size of button. The default is medium.
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group size="mini">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group size="small">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group size="medium">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group size="large">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group size="mini">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group size="small">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group size="medium">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
<div fscw gap-2>
<pl-button-group size="large">
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template>vertical
You can use the vertical attribute to define whether the button-group is vertical.
<template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group vertical>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template><template>
<div space-y-2>
<div fscw gap-2>
<pl-button-group vertical>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</div>
</template>disabled
You can use the disabled attribute to define whether the button-group is disabled.
<template>
<div space-y-2>
<pl-button-group mode="solid" disabled>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</template><template>
<div space-y-2>
<pl-button-group mode="solid" disabled>
<pl-button>
button
</pl-button>
<pl-button>
button
</pl-button>
</pl-button-group>
</div>
</template>Props
| Name | Type | Default | Description |
|---|---|---|---|
| type | solid | white | outline | solid | Set custom type attribute. |
| shape | rounded | pilled | plain | rounded | Set button group shape. |
| size | mini | small | medium | large | medium | Set button group size. |
| state | info | success | warning | danger | info | Set button group state. |
| vertical | boolean | false | Set native type attribute. |
| disabled | boolean | false | Disable the button group. |
Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | Customize default content. |