4560adfdf8
* refactor(style): adjust component size to large/default/small * refactor(components): avatar size & use flex instead of block * refactor(components): adjust check button size * refactor(components): adjust tag size * refactor(components): adjust size doc * fix(components): datetime-picker demo style width * refactor(components): color-picker size & block to flex * refactor(components): adjust slider input size * refactor(components): adjust radio input size for demo * refactor(components): adjust select size & docs * refactor(components): adjust form radio size & docs * refactor(components): add windicss for docs * refactor(components): adjust skeleton avatar size to css var * refactor(components): simplify typography size demo * refactor(components): adjust dropdown size & demo * refactor(components): adjust descriptions size * fix(components): datetime-picker showcase class pollute global button * chore(ci): upgrade docs dependencies to fix ci * fix(ci): add highlight because vitepress not export it * fix(ci): disable line for no-console * fix(ci): remove mini to fix test * fix(style): code font size * fix(style): button span flex style * fix(style): button padding horizontal default 15px * refactor(components): adjust tag padding size & demo * refactor(components): adjust form line-height for input * refactor(components): adjust dropdown menu size & button padding * fix(style): picker separator block to flex center * fix: dropdown button span items-center * style: adjust input-with-icon & size demo & fix input vitepress load * chore: upgrade dependencies * chore: upgrade dependencies * ci: fix website build * ci: regenerate pnpm-lock.yaml * ci: use dev pnpm-lock * ci: update pnpm-lock.yaml
4.9 KiB
| title | lang |
|---|---|
| Button | en-US |
Button
Commonly used button.
Basic usage
:::demo Use type, plain, round and circle to define Button's style.
button/basic
:::
Disabled Button
The disabled attribute determines if the button is disabled.
:::demo Use disabled attribute to determine whether a button is disabled. It accepts a Boolean value.
button/disabled
:::
Text Button
Buttons without border and background.
:::demo
button/text
:::
Icon Button
Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
:::demo Use the icon attribute to add icon. You can find the icon list in Element Plus icon component. Adding icons to the right side of the text is achievable with an <i> tag. Custom icons can be used as well.
button/icon
:::
Button Group
Displayed as a button group, can be used to group a series of similar operations.
:::demo Use tag <el-button-group> to group your buttons.
button/group
:::
Loading Button
Click the button to load data, then the button displays a loading state.
:::demo Set loading attribute to true to display loading state.
button/loading
:::
Sizes
Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
:::demo Use attribute size to set additional sizes with large, small.
button/size
:::
Custom Color beta
You can custom button color.
We will calculate hover color & active color automatically.
:::demo
button/custom
:::
Button Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| size | button size | string | large / default /small | — |
| type | button type | string | primary / success / warning / danger / info / text | — |
| plain | determine whether it's a plain button | boolean | — | false |
| round | determine whether it's a round button | boolean | — | false |
| circle | determine whether it's a circle button | boolean | — | false |
| loading | determine whether it's loading | boolean | — | false |
| 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 / submit / reset | button |
| auto-insert-space | automatically insert a space between two chinese characters | boolean | — |
Button Slots
| Name | Description |
|---|---|
| — | customize default content |
Button-Group Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| size | control the size of buttons in this button-group | string | large / small | — |
| type | control the type of buttons in this button-group | string | primary / success / warning | — |
Button-Group Slots
| Name | Description | Subtags |
|---|---|---|
| - | customize button group content | Button |