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

ParametersDescriptionTypeDefault value
typeType, optional values are primary success warning dangerstringdefault
sizeSize, optional values are large small ministringnormal
textButton textstring-
colorButton color, supports passing in linear-gradient gradient colorstring-
iconThe icon name or image link on the left, which is equivalent to the name attribute of the Icon componentstring-
icon-prefixIcon class name prefix, equivalent to the class-prefix attribute of the Icon componentstringz-icon
icon-positionIcon placement position, optional value is rightstringleft
blockWhether it is a block-level elementbooleanfalse
plainWhether it is a plain buttonbooleanfalse
squareWhether it is a square buttonbooleanfalse
roundWhether it is a round buttonbooleanfalse
disabledWhether to disable the buttonbooleanfalse
hairlineWhether to use 0.5px borderbooleantrue
loadingWhether to display loading statusbooleanfalse
loading-textLoading status prompt textstring-
loading-typeLoading icon type, optional value is spinnerstringcircular
loading-sizeLoading icon size, the default unit is px, you can pass in a string with rpx unitnumber | string-
customStyleCustom button styleobject-
customClassThe class name of the custom buttonobject-
formTypeUsed for form component, click will trigger the submit/reset event of form component respectivelystring-
hide-borderWhether to force the border to be hidden. Setting this property will force the button's border to be hiddenbooleanfalse
hide-radiusWhether to forcefully remove the border-radius stylebooleanfalse

Events

Event nameDescriptionCallback parameters
clickTriggered when a button is clicked and the button status is not loaded or disabledevent
clickLoadingTriggered when the button is clicked and the button status is loadingevent

Slots

NameDescription
defaultbutton content
iconcustom icon
loadingcustom 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.

NameDefaultDescription
--z-button-mini-height46rpx-
--z-button-mini-padding0 var(--z-padding-base)-
--z-button-mini-font-sizevar(--z-font-size-xs)-
--z-button-small-height64rpx-
--z-button-small-padding0 var(--z-padding-xs)-
--z-button-small-font-sizevar(--z-font-size-sm)-
--z-button-normal-font-sizevar(--z-font-size-md)-
--z-button-normal-padding0 30rpx-
--z-button-large-height100rpx-
--z-button-default-height88rpx-
--z-button-default-line-height1.2-
--z-button-default-font-sizevar(--z-font-size-lg)-
--z-button-default-colorvar(--z-text-color)-
--z-button-default-backgroundvar(--z-background-2)-
--z-button-default-border-colorvar(--z-gray-4)-
--z-button-primary-colorvar(--z-white)-
--z-button-primary-backgroundvar(--z-primary-color)-
--z-button-primary-border-colorvar(--z-primary-color)-
--z-button-success-colorvar(--z-white)-
--z-button-success-backgroundvar(--z-success-color)-
--z-button-success-border-colorvar(--z-success-color)-
--z-button-danger-colorvar(--z-white)-
--z-button-danger-backgroundvar(--z-danger-color)-
--z-button-danger-border-colorvar(--z-danger-color)-
--z-button-warning-colorvar(--z-white)-
--z-button-warning-backgroundvar(--z-orange)-
--z-button-warning-border-colorvar(--z-orange)-
--z-button-border-widthvar(--z-border-width)-
--z-button-radiusvar(--z-radius-md)-
--z-button-round-radiusvar(--z-radius-max)-
--z-button-plain-backgroundvar(--z-white)-
--z-button-disabled-opacityvar(--z-disabled-opacity)-
--z-button-icon-size1.2em-
--z-button-loading-icon-size40rpx-

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.