Button
Common Buttons
Basic Usage
Use type、plain、round 、dashed and circle to change button style.
vue
<template>
<div class="button-col">
<div class="button-row">
<re-button>Default</re-button>
<re-button type="primary">Primary</re-button>
<re-button type="success">Success</re-button>
<re-button type="warning">Warning</re-button>
<re-button type="danger">Danger</re-button>
<re-button type="info">Info</re-button>
</div>
<div class="button-row">
<re-button plain>Plain</re-button>
<re-button type="primary" plain>Primary</re-button>
<re-button type="success" plain>Success</re-button>
<re-button type="warning" plain>Warning</re-button>
<re-button type="danger" plain>Danger</re-button>
<re-button type="info" plain>Info</re-button>
</div>
<div class="button-row">
<re-button round>Round</re-button>
<re-button type="primary" round>Primary</re-button>
<re-button type="success" round>Success</re-button>
<re-button type="warning" round>Warning</re-button>
<re-button type="danger" round>Danger</re-button>
<re-button type="info" round>Info</re-button>
</div>
<div class="button-row">
<re-button dashed>Dashed</re-button>
<re-button type="primary" dashed>Primary</re-button>
<re-button type="success" dashed>Success</re-button>
<re-button type="warning" dashed>Warning</re-button>
<re-button type="danger" dashed>Danger</re-button>
<re-button type="info" dashed>Info</re-button>
</div>
<div class="button-row">
<re-button circle icon="search" />
<re-button circle icon="search-bold" type="primary" />
<re-button circle icon="arrow-right" type="success" />
<re-button circle icon="arrow-up" type="warning" />
<re-button circle icon="delete" type="danger" />
<re-button circle icon="close-short" type="info" />
<re-button circle icon="star" type="warning" dashed />
</div>
</div>
</template>Disabled Button
Use disabled attribute to disable a button. It accepts a Boolean value.
vue
<template>
<div class="button-col">
<div class="button-row">
<re-button disabled>Default</re-button>
<re-button type="primary" disabled>Primary</re-button>
<re-button type="success" disabled>Success</re-button>
<re-button type="warning" disabled>Warning</re-button>
<re-button type="danger" disabled>Danger</re-button>
<re-button type="info" disabled>Info</re-button>
</div>
<div class="button-row">
<re-button plain disabled>Plain</re-button>
<re-button type="primary" plain disabled>Primary</re-button>
<re-button type="success" plain disabled>Success</re-button>
<re-button type="warning" plain disabled>Warning</re-button>
<re-button type="danger" plain disabled>Danger</re-button>
<re-button type="info" plain disabled>Info</re-button>
</div>
<div class="button-row">
<re-button dashed disabled>Dashed</re-button>
<re-button type="primary" dashed disabled>Primary</re-button>
<re-button type="success" dashed disabled>Success</re-button>
<re-button type="warning" dashed disabled>Warning</re-button>
<re-button type="danger" dashed disabled>Danger</re-button>
<re-button type="info" dashed disabled>Info</re-button>
</div>
</div>
</template>Link Button
Use link attribute to create a button that looks like a link.
Basic Link Button
Link Button with Icon
Disabled Link Button
vue
<template>
<p>Basic Link Button</p>
<re-button link>Default</re-button>
<re-button link type="primary">Primary</re-button>
<re-button link type="success">Success</re-button>
<re-button link type="warning">Warning</re-button>
<re-button link type="danger">Danger</re-button>
<re-button link type="info">Info</re-button>
<p>Link Button with Icon</p>
<re-button link icon="search-bold">Search</re-button>
<re-button type="danger" link icon="delete">Delete</re-button>
<p>Disabled Link Button</p>
<re-button link disabled>Default</re-button>
<re-button link type="primary" disabled>Primary</re-button>
<re-button link type="success" disabled>Success</re-button>
<re-button link type="warning" disabled>Warning</re-button>
<re-button link type="danger" disabled>Danger</re-button>
<re-button link type="info" disabled>Info</re-button>
</template>Text Button
Use text 、 padding and bg attribute to create a text button.
Basic Text Button
Text Button with icon
Text Button with padding
Text Button with padding and background
Disabled Text Button
Disabled Text Button with padding
Disabled Text Button with padding and background
vue
<template>
<p>Basic Text Button</p>
<re-button text>Default</re-button>
<re-button text type="primary">Primary</re-button>
<re-button text type="success">Success</re-button>
<re-button text type="warning">Warning</re-button>
<re-button text type="danger">Danger</re-button>
<re-button text type="info">Info</re-button>
<p>Text Button with icon</p>
<re-button text icon="search">Default</re-button>
<re-button text icon="search-bold" type="primary">Primary</re-button>
<re-button text icon="delete" type="danger">Danger</re-button>
<re-button text icon="close" type="info">Info</re-button>
<p>Text Button with padding</p>
<re-button text padding>Default</re-button>
<re-button text padding type="primary">Primary</re-button>
<re-button text padding type="success">Success</re-button>
<re-button text padding type="warning">Warning</re-button>
<re-button text padding type="danger">Danger</re-button>
<re-button text padding type="info">Info</re-button>
<p>Text Button with padding and background</p>
<div class="button-row">
<re-button text bg>Default</re-button>
<re-button text bg type="primary">Primary</re-button>
<re-button text bg type="success">Success</re-button>
<re-button text bg type="warning">Warning</re-button>
<re-button text bg type="danger">Danger</re-button>
<re-button text bg type="info">Info</re-button>
</div>
<p>Disabled Text Button</p>
<re-button text disabled>Default</re-button>
<re-button text disabled type="primary">Primary</re-button>
<re-button text disabled type="success">Success</re-button>
<re-button text disabled type="warning">Warning</re-button>
<re-button text disabled type="danger">Danger</re-button>
<re-button text disabled type="info">Info</re-button>
<p>Disabled Text Button with padding</p>
<re-button text padding disabled>Default</re-button>
<re-button text padding disabled type="primary">Primary</re-button>
<re-button text padding disabled type="success">Success</re-button>
<re-button text padding disabled type="warning">Warning</re-button>
<re-button text padding disabled type="danger">Danger</re-button>
<re-button text padding disabled type="info">Info</re-button>
<p>Disabled Text Button with padding and background</p>
<div class="button-row">
<re-button text bg disabled>Default</re-button>
<re-button text bg disabled type="primary">Primary</re-button>
<re-button text bg disabled type="success">Success</re-button>
<re-button text bg disabled type="warning">Warning</re-button>
<re-button text bg disabled type="danger">Danger</re-button>
<re-button text bg disabled type="info">Info</re-button>
</div>
</template>Icon Button
The icon attribute enables the creation of an icon button. It supports two types of values:String: A Rappel-UI icon name.Object: An icon component.
Note that if you pass an arbitrary String, it will be applied as the <i> tag's class name, which requires you to import the icon font beforehand
String Icon Button
Component Icon Button
Circle Text Icon Button
Other String Icon Button
vue
<template>
<p>String Icon Button</p>
<div class="button-row">
<re-button type="primary" icon="search">Primary</re-button>
<re-button type="success" icon="search-bold">Success</re-button>
<re-button type="warning" icon="exclam">Warning</re-button>
<re-button type="danger" icon="delete">Danger</re-button>
<re-button type="info" icon="close">Info</re-button>
</div>
<p>Component Icon Button</p>
<re-button type="primary" title="search" :icon="Search"></re-button>
<re-button type="success" title="search" :icon="SearchBold"></re-button>
<re-button type="warning" title="previous" :icon="Exclam"></re-button>
<re-button type="danger" title="delete" :icon="Delete"></re-button>
<re-button type="info" title="close" :icon="Close"></re-button>
<p>Circle Text Icon Button</p>
<re-button plain circle title="collect" icon="star"></re-button>
<re-button text circle title="copy"><Copy size="1.25em" /></re-button>
<re-button
text
circle
:title="isCollected ? 'uncollect' : 'collect'"
:icon="isCollected ? StarFill : Star"
@click.stop="toggle()"
></re-button>
<p>Other String Icon Button</p>
<re-button type="primary" icon="other-icon-lib">Primary</re-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import {
Search,
SearchBold,
Delete,
Close,
Exclam,
Copy,
Star,
StarFill
} from '@rappel-ui/svg-icons'
const isCollected = ref<boolean>(false)
const toggle = () => {
isCollected.value = !isCollected.value
}
</script>Loading Button
Use loading and loading-icon attribute to create a loading button.
vue
<template>
<div class="button-row">
<re-button type="primary" loading disabled>Default</re-button>
<re-button type="primary" loading loading-icon="close" disabled>String</re-button>
<re-button type="primary" loading :loading-icon="Star" disabled>Component</re-button>
</div>
</template>
<script lang="ts" setup>
import { Star } from '@rappel-ui/svg-icons'
</script>Sizes
Use size attribute to adjust the button size, besides the default size, it accepts large、small、mini as values.
Common Button Sizes
Round Button Sizes
Circle Button Sizes
vue
<template>
<p>Common Button Sizes</p>
<re-button size="large">Large</re-button>
<re-button>Default</re-button>
<re-button size="small">Small</re-button>
<re-button size="mini">Mini</re-button>
<p>Round Button Sizes</p>
<re-button size="large" round>Large</re-button>
<re-button round>Default</re-button>
<re-button size="small" round>Small</re-button>
<re-button size="mini" round>Mini</re-button>
<p>Circle Button Sizes</p>
<re-button size="large" icon="search-bold" circle />
<re-button icon="search-bold" circle />
<re-button icon="search-bold" size="small" circle />
<re-button icon="search-bold" size="mini" circle />
</template>Button Group
Use <re-button-group> component to group the buttons.
Basic Button Group
Round Button Group
Vertical Button Group
Button Group Has Gap
Vertical Button Group Has Gap
vue
<template>
<p>Basic Button Group</p>
<re-button-group>
<re-button icon="arrow-forward"></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-backward"></re-button>
</re-button-group>
<re-button-group class="ml-2em" type="primary">
<re-button icon="arrow-forward"></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-backward"></re-button>
</re-button-group>
<p>Round Button Group</p>
<re-button-group type="primary">
<re-button icon="arrow-forward" round></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-backward" round></re-button>
</re-button-group>
<p>Vertical Button Group</p>
<re-button-group direction="vertical">
<re-button icon="arrow-upward"></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-downward"></re-button>
</re-button-group>
<re-button-group type="primary" class="ml-2em" direction="vertical">
<re-button icon="arrow-upward"></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-downward"></re-button>
</re-button-group>
<p>Button Group Has Gap</p>
<re-button-group gap="10px">
<re-button icon="arrow-forward"></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-backward"></re-button>
</re-button-group>
<re-button-group type="primary" class="ml-2em" gap="10px">
<re-button icon="arrow-forward"></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-backward"></re-button>
</re-button-group>
<p>Vertical Button Group Has Gap</p>
<re-button-group direction="vertical" gap="10px">
<re-button icon="arrow-upward"></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-downward"></re-button>
</re-button-group>
<re-button-group type="primary" direction="vertical" class="ml-2em" gap="10px">
<re-button icon="arrow-upward"></re-button>
<re-button>b1</re-button>
<re-button>b2</re-button>
<re-button icon="arrow-downward"></re-button>
</re-button-group>
</template>Button Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| type | Button type | enum | — |
| size | Button size | 'large' | 'small' | 'mini' | — |
| disabled | Disable button | boolean | — |
| link | Whether it's a link button | boolean | — |
| text | Whether it's a text button | boolean | — |
| padding | Whether the text button has padding | boolean | — |
| bg | Whether the text button has padding and background | boolean | — |
| plain | Whether it's a plain button | boolean | — |
| round | Whether it's a round button | boolean | — |
| circle | Whether it's a circle button | boolean | — |
| dashed | Whether it's a dashed button | boolean | — |
| loading | Whether it's a loading button | boolean | — |
| loading-icon | Customize loading icon | Component | IconName |string | Loading |
| icon | Button prefix icon | Component | IconName |string | — |
| autofocus | Native button autofocus | boolean | — |
| native-type | Native button type | 'button' | 'submit' | 'reset' | button |
Button Slots
| Name | Description |
|---|---|
| default | Customize default content |
| loading | Customize loading Component |
| icon | Customize prefix icon Component |
Button Exposes
| Name | Description | Type |
|---|---|---|
| ref | Button html element | HTMLButtonElement |
ButtonGroup Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| type | Button type, it's priority is lower than type attribute | enum | — |
| size | Button size, it's priority is lower than size attribute | 'large' | 'small' | 'mini' | — |
| direction | Button group layout direction | 'horizontal' | 'vertical' | horizontal |
| gap | Button group gap | string | number | — |
ButtonGroup Slots
| Name | Description |
|---|---|
| default | Customize button group content |