Tu View PlusButton
A button is a command component to trigger an operation.
Basic usage
Use type, plain, round and circle to define Buttons style.
<template>
<tu-row class="mb-2">
<tu-button>Default</tu-button>
<tu-button type="primary">Primary</tu-button>
<tu-button type="success">Success</tu-button>
<tu-button type="info">Information</tu-button>
<tu-button type="warning">Warning</tu-button>
<tu-button type="danger">Danger</tu-button>
</tu-row>
<tu-row class="mb-2">
<tu-button round>Default</tu-button>
<tu-button type="primary" round>Primary</tu-button>
<tu-button type="success" round>Success</tu-button>
<tu-button type="info" round>Information</tu-button>
<tu-button type="warning" round>Warning</tu-button>
<tu-button type="danger" round>Danger</tu-button>
</tu-row>
<tu-row>
<tu-button circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="success" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="primary" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="info" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="warning" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="danger" circle>
<template #icon><Search /></template>
</tu-button>
</tu-row>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script><template>
<tu-row class="mb-2">
<tu-button>Default</tu-button>
<tu-button type="primary">Primary</tu-button>
<tu-button type="success">Success</tu-button>
<tu-button type="info">Information</tu-button>
<tu-button type="warning">Warning</tu-button>
<tu-button type="danger">Danger</tu-button>
</tu-row>
<tu-row class="mb-2">
<tu-button round>Default</tu-button>
<tu-button type="primary" round>Primary</tu-button>
<tu-button type="success" round>Success</tu-button>
<tu-button type="info" round>Information</tu-button>
<tu-button type="warning" round>Warning</tu-button>
<tu-button type="danger" round>Danger</tu-button>
</tu-row>
<tu-row>
<tu-button circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="success" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="primary" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="info" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="warning" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button type="danger" circle>
<template #icon><Search /></template>
</tu-button>
</tu-row>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script>Disabled Button
The disabled attribute determines if the button is disabled. Use disabled attribute to determine whether a button is disabled. It accepts a Boolean value.
<template>
<tu-row>
<tu-button disabled>Default</tu-button>
<tu-button type="primary" disabled>Primary</tu-button>
<tu-button type="success" disabled>Success</tu-button>
<tu-button type="info" disabled>Information</tu-button>
<tu-button type="warning" disabled>Warning</tu-button>
<tu-button type="danger" disabled>Danger</tu-button>
</tu-row>
</template><template>
<tu-row>
<tu-button disabled>Default</tu-button>
<tu-button type="primary" disabled>Primary</tu-button>
<tu-button type="success" disabled>Success</tu-button>
<tu-button type="info" disabled>Information</tu-button>
<tu-button type="warning" disabled>Warning</tu-button>
<tu-button type="danger" disabled>Danger</tu-button>
</tu-row>
</template>Text Button
Button without border and background color.
<template>
<tu-button type="text">Text</tu-button>
<tu-button type="text" disabled>Text</tu-button>
</template><template>
<tu-button type="text">Text</tu-button>
<tu-button type="text" disabled>Text</tu-button>
</template>Icon Button
Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
<template>
<tu-button>
<template #icon><Search /></template>
</tu-button>
<tu-button>
<template #icon><Search /></template>
Search
</tu-button>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script><template>
<tu-button>
<template #icon><Search /></template>
</tu-button>
<tu-button>
<template #icon><Search /></template>
Search
</tu-button>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script>Button Group
Displayed as a button group, can be used to group a series of similar operations. Use tag <tu-button-group> to group your buttons.
<template>
<tu-button-group>
<tu-button>Previous</tu-button>
<tu-button>Next</tu-button>
</tu-button-group>
<tu-button-group type="primary">
<tu-button>Previous</tu-button>
<tu-button>Next</tu-button>
</tu-button-group>
</template><template>
<tu-button-group>
<tu-button>Previous</tu-button>
<tu-button>Next</tu-button>
</tu-button-group>
<tu-button-group type="primary">
<tu-button>Previous</tu-button>
<tu-button>Next</tu-button>
</tu-button-group>
</template>Loading Button
Click the button to load data, then the button displays a loading state. Set loading attribute to true to display loading state.
<template>
<tu-button loading>Loading</tu-button>
<tu-button loading :loading-icon="Tools"> Loading </tu-button>
<tu-button type="primary" loading>Loading</tu-button>
</template>
<script lang="ts" setup>
import { Tools } from '@tu-view-plus/icons-vue';
</script><template>
<tu-button loading>Loading</tu-button>
<tu-button loading :loading-icon="Tools"> Loading </tu-button>
<tu-button type="primary" loading>Loading</tu-button>
</template>
<script lang="ts" setup>
import { Tools } from '@tu-view-plus/icons-vue';
</script>Long Button
By setting the long property, the width of the button follows the width of the container.
<template>
<tu-space :size="12" direction="vertical" fill>
<tu-button long>Default</tu-button>
<tu-button type="primary" long>Primary</tu-button>
<tu-button type="success" long>Success</tu-button>
<tu-button type="info" long>Information</tu-button>
<tu-button type="warning" long>Warning</tu-button>
<tu-button type="danger" long>Danger</tu-button>
</tu-space>
</template><template>
<tu-space :size="12" direction="vertical" fill>
<tu-button long>Default</tu-button>
<tu-button type="primary" long>Primary</tu-button>
<tu-button type="success" long>Success</tu-button>
<tu-button type="info" long>Information</tu-button>
<tu-button type="warning" long>Warning</tu-button>
<tu-button type="danger" long>Danger</tu-button>
</tu-space>
</template>Sizes
Besides default size, Button component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.
<template>
<tu-row class="demo-button-row mb-2">
<tu-button size="mini" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button size="small" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button circle>
<template #icon><Search /></template>
</tu-button>
<tu-button size="large" circle>
<template #icon><Search /></template>
</tu-button>
</tu-row>
<tu-row class="demo-button-row mb-2">
<tu-button size="mini">Mini</tu-button>
<tu-button size="small">Small</tu-button>
<tu-button>Medium</tu-button>
<tu-button size="large">Large</tu-button>
</tu-row>
<tu-row class="demo-button-row mb-2">
<tu-button size="mini" round>Mini</tu-button>
<tu-button size="small" round>Small</tu-button>
<tu-button round>Medium</tu-button>
<tu-button size="large" round>Large</tu-button>
</tu-row>
<tu-row class="demo-button-row">
<tu-button-group size="mini">
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
<tu-button-group size="small">
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
<tu-button-group>
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
<tu-button-group size="large">
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
</tu-row>
</template>
<script lang="ts" setup>
import { Search, ArrowLeft, ArrowRight } from '@tu-view-plus/icons-vue';
</script>
<style>
.demo-button-row {
align-items: baseline;
}
</style><template>
<tu-row class="demo-button-row mb-2">
<tu-button size="mini" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button size="small" circle>
<template #icon><Search /></template>
</tu-button>
<tu-button circle>
<template #icon><Search /></template>
</tu-button>
<tu-button size="large" circle>
<template #icon><Search /></template>
</tu-button>
</tu-row>
<tu-row class="demo-button-row mb-2">
<tu-button size="mini">Mini</tu-button>
<tu-button size="small">Small</tu-button>
<tu-button>Medium</tu-button>
<tu-button size="large">Large</tu-button>
</tu-row>
<tu-row class="demo-button-row mb-2">
<tu-button size="mini" round>Mini</tu-button>
<tu-button size="small" round>Small</tu-button>
<tu-button round>Medium</tu-button>
<tu-button size="large" round>Large</tu-button>
</tu-row>
<tu-row class="demo-button-row">
<tu-button-group size="mini">
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
<tu-button-group size="small">
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
<tu-button-group>
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
<tu-button-group size="large">
<tu-button>
<template #icon><ArrowLeft /></template>
</tu-button>
<tu-button>
<template #icon><ArrowRight /></template>
</tu-button>
</tu-button-group>
</tu-row>
</template>
<script lang="ts" setup>
import { Search, ArrowLeft, ArrowRight } from '@tu-view-plus/icons-vue';
</script>
<style>
.demo-button-row {
align-items: baseline;
}
</style>Button API
Button Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| size | Button size | String | medium |
| type | Button type | String | - |
| round | Determine whether it's a round button | Boolean | false |
| circle | Determine whether it's a circle button | Boolean | false |
| long | Whether the width of the button adapts to the container. | Boolean | false |
| loading | Determine whether it's loading | Boolean | false |
| loading-icon | Customize loading icon component | String Component | Loading |
| disabled | Disable the button | Boolean | false |
| icon | Icon component | String Component | - |
| autofocus | Same as native button's autofocus | Boolean | false |
| native-type | Same as native button's type | String | button |
Button Slots
| Name | Description |
|---|---|
| default | Customize default content |
| loading | Customize loading component |
| icon | Customize icon component |
Button Exposes
| Name | Description | Type |
|---|---|---|
| ref | Button html element | Object |
| size | Button size | Object |
| type | Button type | Object |
| disabled | Button disabled | Object |
ButtonGroup API
ButtonGroup Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| size | Control the size of buttons in this button-group | String | - |
| type | Control the type of buttons in this button-group | String | - |
ButtonGroup Slots
| Name | Description | Default |
|---|---|---|
| default | Customize button group content | Button |