Button
introduce
Buttons are often used to trigger actions.
Code Demo
Button type
The button supports five types: default
, primary
, success
, warning
, and danger
. The default is default
.
<z-button type="primary">Primary button</z-button>
<z-button type="success">Success button</z-button>
<z-button type="default">Default button</z-button>
<z-button type="warning">Warning button</z-button>
<z-button type="danger">Danger button</z-button>
Simple button
Set the button to a plain button through the plain
attribute. The text of the plain button is the button color and the background is white.
<z-button plain type="primary">plain button</z-button>
<z-button plain type="success">Plain button</z-button>
Thin border
Set the hairline
property to display a thin border of 0.5px.
In order to standardize the differences between Andriod and IOS, Zebra has processed the buttons, and the borders of the buttons use a thin border by default.
<z-button plain hairline type="primary">Thin border button</z-button>
<z-button plain hairline type="success">Thin border button</z-button>
Disabled state
Disable the button through the disabled
attribute. The button is not clickable in the disabled state.
<z-button disabled type="primary">Disabled state</z-button>
<z-button disabled type="success">Disabled status</z-button>
Loading status
Use the loading
attribute to set the button to the loading state. The button text will be hidden by default in the loading state. You can use loading-text
to set the text in the loading state.
<z-button loading type="primary" />
<z-button loading type="primary" loading-type="spinner" />
<z-button loading type="success" loading-text="Loading..." />
Button shape
Use square
to set a square button, and round
to set a round button.
<z-button square type="primary">Square button</z-button>
<z-button round type="success">Round button</z-button>
Icon Button
Set the button icon through the icon
attribute, which supports all icons in the Icon component. You can also pass in the icon URL.
<z-button icon="plus" type="primary" />
<z-button icon="plus" type="primary">Button</z-button>
<z-button
icon="https://cdn.zebraui.com/zebra-ui/images/assets/demo-select.png"
type="primary"
>
button
</z-button>
Button size
Supports four sizes: large
, normal
, small
, and mini
. The default is normal
.
<z-button type="primary" size="large">Large button</z-button>
<z-button type="primary" size="normal">Normal button</z-button>
<z-button type="primary" size="small">Small button</z-button>
<z-button type="primary" size="mini">Mini button</z-button>
Block-level elements
Buttons are inline block-level elements by default. The block
attribute can be used to set the button's element type to a block-level element.
<z-button type="primary" block>Block-level element</z-button>
Custom color
The color of the button can be customized through the color
attribute.
<z-button color="#7232dd">Single color button</z-button>
<z-button color="#7232dd" plain>Single color button</z-button>
<z-button color="linear-gradient(to right, #ff6034, #ee0a24)">
Gradient color button
</z-button>
Animation button
With Button and Swipe component, you can achieve vertical scrolling animated button effects.
<z-button type="danger">
<z-swipe
vertical
class="notice-swipe"
:autoplay="2000"
:touchable="false"
:show-indicators="false"
:custom-style="{ height: '30rpx' }"
>
<z-swipe-item>Button 1</z-swipe-item>
<z-swipe-item>Button 2</z-swipe-item>
</z-swipe>
</z-button>
API
Props
Parameters | Description | Type | Default value |
---|---|---|---|
type | Type, optional values are primary success warning danger | string | default |
size | Size, optional values are large small mini | string | normal |
text | Button text | string | - |
color | Button color, supports passing in linear-gradient gradient color | string | - |
icon | The icon name or image link on the left, which is equivalent to the name attribute of the Icon component | string | - |
icon-prefix | Icon class name prefix, equivalent to the class-prefix attribute of the Icon component | string | z-icon |
icon-position | Icon placement position, optional value is right | string | left |
block | Whether it is a block-level element | boolean | false |
plain | Whether it is a plain button | boolean | false |
square | Whether it is a square button | boolean | false |
round | Whether it is a round button | boolean | false |
disabled | Whether to disable the button | boolean | false |
hairline | Whether to use 0.5px border | boolean | true |
loading | Whether to display loading status | boolean | false |
loading-text | Loading status prompt text | string | - |
loading-type | Loading icon type, optional value is spinner | string | circular |
loading-size | Loading icon size, the default unit is px , you can pass in a string with rpx unit | number | string | - |
customStyle | Custom button style | object | - |
customClass | The class name of the custom button | object | - |
formType | Used for form component, click will trigger the submit /reset event of form component respectively | string | - |
hide-border | Whether to force the border to be hidden. Setting this property will force the button's border to be hidden | boolean | false |
hide-radius | Whether to forcefully remove the border-radius style | boolean | false |
Events
Event name | Description | Callback parameters |
---|---|---|
click | Triggered when a button is clicked and the button status is not loaded or disabled | event |
clickLoading | Triggered when the button is clicked and the button status is loading | event |
Slots
Name | Description |
---|---|
default | button content |
icon | custom icon |
loading | custom loading icon |
Type definition
The component exports the following type definitions:
import type {
ButtonType,
ButtonSize,
ButtonProps,
ButtonIconPosition,
} from '@zebra-ui/uniapp/components/z-button/types';
Theme customization
Style variables
The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.
Name | Default | Description |
---|---|---|
--z-button-mini-height | 46rpx | - |
--z-button-mini-padding | 0 var(--z-padding-base) | - |
--z-button-mini-font-size | var(--z-font-size-xs) | - |
--z-button-small-height | 64rpx | - |
--z-button-small-padding | 0 var(--z-padding-xs) | - |
--z-button-small-font-size | var(--z-font-size-sm) | - |
--z-button-normal-font-size | var(--z-font-size-md) | - |
--z-button-normal-padding | 0 30rpx | - |
--z-button-large-height | 100rpx | - |
--z-button-default-height | 88rpx | - |
--z-button-default-line-height | 1.2 | - |
--z-button-default-font-size | var(--z-font-size-lg) | - |
--z-button-default-color | var(--z-text-color) | - |
--z-button-default-background | var(--z-background-2) | - |
--z-button-default-border-color | var(--z-gray-4) | - |
--z-button-primary-color | var(--z-white) | - |
--z-button-primary-background | var(--z-primary-color) | - |
--z-button-primary-border-color | var(--z-primary-color) | - |
--z-button-success-color | var(--z-white) | - |
--z-button-success-background | var(--z-success-color) | - |
--z-button-success-border-color | var(--z-success-color) | - |
--z-button-danger-color | var(--z-white) | - |
--z-button-danger-background | var(--z-danger-color) | - |
--z-button-danger-border-color | var(--z-danger-color) | - |
--z-button-warning-color | var(--z-white) | - |
--z-button-warning-background | var(--z-orange) | - |
--z-button-warning-border-color | var(--z-orange) | - |
--z-button-border-width | var(--z-border-width) | - |
--z-button-radius | var(--z-radius-md) | - |
--z-button-round-radius | var(--z-radius-max) | - |
--z-button-plain-background | var(--z-white) | - |
--z-button-disabled-opacity | var(--z-disabled-opacity) | - |
--z-button-icon-size | 1.2em | - |
--z-button-loading-icon-size | 40rpx | - |
Precautions
The button
component of uniapp
has its own border and other styles, which cannot be overridden through global styles. The component provides hide-border
and hide-radius
attributes to force override.