Button

introduce

Buttons are often used to trigger actions.

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>

Props

Events

Slots

Type definition

The component exports the following type definitions:

import type {
   ButtonType,
   ButtonSize,
   ButtonProps,
   ButtonIconPosition,
} from '@zebra-ui/uniapp/components/z-button/types';

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

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.