doc.en-US.md 7.5 KB
Button
Intro
Buttons are used to trigger an action, such as submitting a form.
Install
import { createApp } from 'vue';
import { Button } from '@nutui/nutui';
const app = createApp();
app.use(Button);
Type
The button supports six types: default, primary, info, warning, danger, success, the default is default.
:::demo
<template>
<nut-button type="primary">Primary</nut-button>
<nut-button type="info">Info</nut-button>
<nut-button type="default">Default</nut-button>
<nut-button type="danger">Danger</nut-button>
<nut-button type="warning">Warning</nut-button>
<nut-button type="success">Success</nut-button>
</template>
:::
Plain
The button is set as a plain button through the plain property, the text of the plain button is the button color, and the background is white.
:::demo
<template>
<nut-button plain type="primary">Plain</nut-button>
<nut-button plain type="info">Plain</nut-button>
</template>
:::
Disabled
The button is disabled through the disabled property, and the button cannot be clicked in the disabled state.
:::demo
<template>
<nut-button disabled type="primary">Disabled</nut-button>
<nut-button plain disabled type="info">Disabled</nut-button>
<nut-button plain disabled type="primary">Disabled</nut-button>
</template>
:::
Shape
Set the button shape through the shape property, support circle and square buttons, the default is circle.
:::demo
<template>
<nut-button shape="square" type="primary">Square</nut-button>
<nut-button type="info">Round</nut-button>
</template>
:::
Loading
:::demo
<template>
<nut-button loading type="info"></nut-button>
<nut-button loading type="warning">Loading...</nut-button>
<nut-button :loading="isLoading" type="success" @click="changeLoading">Click me!</nut-button>
</template>
<script>
import { ref } from 'vue';
export default {
setup(props) {
let isLoading = ref(false);
const changeLoading = () => {
isLoading.value = true;
setTimeout(() => {
isLoading.value = false;
}, 3000);
};
return {
isLoading,
changeLoading
};
}
};
</script>
:::
Icon
:::demo
<template>
<nut-button shape="square" plain type="primary">
<template #icon>
<StarFill />
</template>
</nut-button>
<nut-button shape="square" type="primary">
<template #icon>
<Star />
</template>
Star
</nut-button>
</template>
:::
Size
Support large, normal, small, mini four sizes, the default is normal.
:::demo
<template>
<nut-button size="large" type="primary">Large</nut-button>
<nut-button type="primary">Normal</nut-button>
<nut-button size="small" type="primary">Small</nut-button>
<nut-button size="mini" type="primary">Mini</nut-button>
</template>
:::
Block
By default, the button is an inline block-level element. The block attribute can set the element type of the button to a block-level element, which is often used to implement banner buttons.
:::demo
<template>
<nut-button block type="primary">Block Element</nut-button>
</template>
:::
Custom Color
The color of the button can be customized through the color property.
:::demo
<template>
<nut-button color="#7232dd">Pure</nut-button>
<nut-button color="#7232dd" plain>Pure</nut-button>
<nut-button color="linear-gradient(to right, #ff6034, #ee0a24)"> Gradient </nut-button>
</template>
:::
API
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| type | Can be set to primary info warning danger success |
String | default |
| size | Can be set to large small mini |
String | normal |
| shape | Can be set to square |
String | round |
| color | Button color, support incoming linear-gradient gradient color | String | - |
| plain | Whether to be plain button | Boolean | false |
| disabled | Whether to disable button | Boolean | false |
| block | Whether to set display block | Boolean | false |
| loading | Whether to show loading status | Boolean | false |
Events
| Event | Description | Arguments |
|---|---|---|
| click | Emitted when component is clicked | event: MouseEvent |
Theming
CSS Variables
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
| Name | Default Value | Description |
|---|---|---|
| --nut-button-border-radius | 25px | - |
| --nut-button-border-width | 1px | - |
| --nut-button-icon-width | 16px | - |
| --nut-button-default-bg-color | var(--nut-white) | - |
| --nut-button-default-border-color | rgba(204, 204, 204, 1) | - |
| --nut-button-default-color | rgba(102, 102, 102, 1) | - |
| --nut-button-default-padding | 0 18px | - |
| --nut-button-mini-padding | 0 12px | - |
| --nut-button-small-padding | 0 12px | - |
| --nut-button-small-height | 28px | - |
| --nut-button-mini-height | 24px | - |
| --nut-button-default-height | 38px | - |
| --nut-button-large-height | 48px | - |
| --nut-button-large-line-height | 46px | - |
| --nut-button-small-line-height | 26px | - |
| --nut-button-block-height | 48px | - |
| --nut-button-default-line-height | 36px | - |
| --nut-button-block-line-height | 46px | - |
| --nut-button-default-font-size | var(--nut-font-size-2) | - |
| --nut-button-large-font-size | var(--nut-button-default-font-size) | - |
| --nut-button-small-font-size | var(--nut-font-size-1) | - |
| --nut-button-mini-font-size | var(--nut-font-size-1) | - |
| --nut-button-mini-line-height | 1.2 | - |
| --nut-button-disabled-opacity | 0.68 | - |
| --nut-button-primary-color | var(--nut-white) | - |
| --nut-button-primary-border-color | var(--nut-primary-color) | - |
| --nut-button-primary-background-color | linear-gradient(135deg,var(--nut-primary-color) 0%,var(--nut-primary-color-end) 100%) | - |
| --nut-button-info-color | var(--nut-white) | - |
| --nut-button-info-border-color | rgba(73, 106, 242, 1) | - |
| --nut-button-info-background-color | linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%) | - |
| --nut-button-success-color | var(--nut-white) | - |
| --nut-button-success-border-color | rgba(38, 191, 38, 1) | - |
| --nut-button-success-background-color | linear-gradient(135deg,rgba(38, 191, 38, 1) 0%,rgba(39, 197, 48, 1) 45%,rgba(40, 207, 63, 1) 83%,rgba(41, 212, 70, 1) 100%) | - |
| --nut-button-danger-color | var(--nut-white) | - |
| --nut-button-danger-border-color | rgba(250, 44, 25, 1) | - |
| --nut-button-danger-background-color | rgba(250, 44, 25, 1) | - |
| --nut-button-warning-color | var(--nut-white) | - |
| --nut-button-warning-border-color | rgba(255, 158, 13, 1) | - |
| --nut-button-warning-background-color | linear-gradient(135deg,rgba(255, 158, 13, 1) 0%,rgba(255, 167, 13, 1) 45%,rgba(255, 182, 13, 1) 83%,rgba(255, 190, 13, 1) 100%) | - |
| --nut-button-plain-background-color | var(--nut-white) | - |
| --nut-button-small-round-border-radius | var(--nut-button-border-radius) | - |