Commonly used button.
Basic usage Use type, plain, round, dashed and circle to define Button's style.
"use client"; import { ElButton } from "@/components/element-plus/button"; import { Check, Delete, Edit, Message, Search, Star } from "@/components/element-plus/generated/icons"; import { exampleRow, exampleStack } from "./styles"; export default function ButtonBasic() { return ( <div className={exampleStack}> <div className={exampleRow}> <ElButton>Default</ElButton> <ElButton type="primary">Primary</ElButton> <ElButton type="success">Success</ElButton> <ElButton type="info">Info</ElButton> <ElButton type="warning">Warning</ElButton> <ElButton type="danger">Danger</ElButton> </div> <div className={exampleRow}> <ElButton plain>Plain</ElButton> <ElButton type="primary" plain>Primary</ElButton> <ElButton type="success" plain>Success</ElButton> <ElButton type="info" plain>Info</ElButton> <ElButton type="warning" plain>Warning</ElButton> <ElButton type="danger" plain>Danger</ElButton> </div> <div className={exampleRow}> <ElButton round>Round</ElButton> <ElButton type="primary" round>Primary</ElButton> <ElButton type="success" round>Success</ElButton> <ElButton type="info" round>Info</ElButton> <ElButton type="warning" round>Warning</ElButton> <ElButton type="danger" round>Danger</ElButton> </div> <div className={exampleRow}> <ElButton dashed>Dashed</ElButton> <ElButton type="primary" dashed>Primary</ElButton> <ElButton type="success" dashed>Success</ElButton> <ElButton type="info" dashed>Info</ElButton> <ElButton type="warning" dashed>Warning</ElButton> <ElButton type="danger" dashed>Danger</ElButton> </div> <div className={exampleRow}> <ElButton icon={<Search />} circle aria-label="search" /> <ElButton type="primary" icon={<Edit />} circle aria-label="edit" /> <ElButton type="success" icon={<Check />} circle aria-label="check" /> <ElButton type="info" icon={<Message />} circle aria-label="message" /> <ElButton type="warning" icon={<Star />} circle aria-label="star" /> <ElButton type="danger" icon={<Delete />} circle aria-label="delete" /> </div> </div> ); } The disabled attribute determines if the button is disabled.
Use disabled attribute to determine whether a button is disabled. It accepts a Boolean value.
"use client"; import { ElButton } from "@/components/element-plus/button"; import { exampleRow, exampleStack } from "./styles"; export default function ButtonDisabled() { return ( <div className={exampleStack}> <div className={exampleRow}> <ElButton disabled>Default</ElButton> <ElButton type="primary" disabled>Primary</ElButton> <ElButton type="success" disabled>Success</ElButton> <ElButton type="info" disabled>Info</ElButton> <ElButton type="warning" disabled>Warning</ElButton> <ElButton type="danger" disabled>Danger</ElButton> </div> <div className={exampleRow}> <ElButton plain disabled>Plain</ElButton> <ElButton type="primary" plain disabled>Primary</ElButton> <ElButton type="success" plain disabled>Success</ElButton> <ElButton type="info" plain disabled>Info</ElButton> <ElButton type="warning" plain disabled>Warning</ElButton> <ElButton type="danger" plain disabled>Danger</ElButton> </div> </div> ); } type="text" has been deprecated , and will be removed in 3.0.0 , consider switching to new API.
New API link has been added in 2.2.1 , you can use type API to set the theme of your link button
Basic link button
plain primary success info warning danger
Disabled link button
plain primary success info warning danger
"use client"; import { ElButton } from "@/components/element-plus/button"; import styles from "./button.module.css"; import { mb16 } from "./styles"; export default function ButtonLink() { return ( <> <p className={styles.demoP}>Basic link button</p> <div className={mb16}> <ElButton link>plain</ElButton> <ElButton type="primary" link>primary</ElButton> <ElButton type="success" link>success</ElButton> <ElButton type="info" link>info</ElButton> <ElButton type="warning" link>warning</ElButton> <ElButton type="danger" link>danger</ElButton> </div> <p className={styles.demoP}>Disabled link button</p> <div> <ElButton link disabled>plain</ElButton> <ElButton type="primary" link disabled>primary</ElButton> <ElButton type="success" link disabled>success</ElButton> <ElButton type="info" link disabled>info</ElButton> <ElButton type="warning" link disabled>warning</ElButton> <ElButton type="danger" link disabled>danger</ElButton> </div> </> ); } Text Button Text button has been upgraded with a new design since 2.2.0 Link out.
The API is also updated, because the type attribute also represents the button's style. So we have to make a new API
text: boolean for text button.
Buttons without border and background.
Basic text button
plain primary success info warning danger
Background color always on
plain primary success info warning danger
Disabled text button
plain primary success info warning danger
"use client"; import { ElButton } from "@/components/element-plus/button"; import styles from "./button.module.css"; import { mb16 } from "./styles"; export default function ButtonText() { return ( <> <p className={styles.demoP}>Basic text button</p> <div className={mb16}> <ElButton text>plain</ElButton> <ElButton type="primary" text>primary</ElButton> <ElButton type="success" text>success</ElButton> <ElButton type="info" text>info</ElButton> <ElButton type="warning" text>warning</ElButton> <ElButton type="danger" text>danger</ElButton> </div> <p className={styles.demoP}>Background color always on</p> <div className={mb16}> <ElButton text bg>plain</ElButton> <ElButton type="primary" text bg>primary</ElButton> <ElButton type="success" text bg>success</ElButton> <ElButton type="info" text bg>info</ElButton> <ElButton type="warning" text bg>warning</ElButton> <ElButton type="danger" text bg>danger</ElButton> </div> <p className={styles.demoP}>Disabled text button</p> <div> <ElButton text disabled>plain</ElButton> <ElButton type="primary" text disabled>primary</ElButton> <ElButton type="success" text disabled>success</ElButton> <ElButton type="info" text disabled>info</ElButton> <ElButton type="warning" text disabled>warning</ElButton> <ElButton type="danger" text disabled>danger</ElButton> </div> </> ); } Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
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.
"use client"; import { ElButton } from "@/components/element-plus/button"; import { Delete, Edit, Search, Share, Upload } from "@/components/element-plus/generated/icons"; import { ElIcon } from "@/components/element-plus/icon/ElIcon"; export default function ButtonIcon() { return ( <div> <ElButton type="primary" icon={<Edit />} aria-label="edit" /> <ElButton type="primary" icon={<Share />} aria-label="share" /> <ElButton type="primary" icon={<Delete />} aria-label="delete" /> <ElButton type="primary" icon={<Search />}> Search </ElButton> <ElButton type="primary"> Upload <ElIcon className="el-icon--right"> <Upload /> </ElIcon> </ElButton> </div> ); } Displayed as a button group, can be used to group a series of similar operations.
In 2.11.9 you can use the direction attribute.
Use tag <el-button-group> to group your buttons.
"use client"; import { useState } from "react"; import { ElButton, ElButtonGroup } from "@/components/element-plus/button"; import { ArrowLeft, ArrowRight, House, Notification, Operation, } from "@/components/element-plus/generated/icons"; import { ElIcon } from "@/components/element-plus/icon/ElIcon"; import { ElRadio, ElRadioGroup } from "@/components/element-plus/radio"; import { mb16, mb8 } from "./styles"; export default function ButtonGroupDemo() { const [direction, setDirection] = useState<"horizontal" | "vertical">( "horizontal", ); return ( <> <ElButtonGroup className={mb16}> <ElButton type="primary" icon={<ArrowLeft />}> Previous Page </ElButton> <ElButton type="primary"> Next Page <ElIcon className="el-icon--right"> <ArrowRight /> </ElIcon> </ElButton> </ElButtonGroup> <br /> <ElRadioGroup value={direction} onChange={(value) => setDirection(value as "horizontal" | "vertical")} className={mb8} > <ElRadio value="horizontal" label="Horizontal" /> <ElRadio value="vertical" label="Vertical" /> </ElRadioGroup> <br /> <ElButtonGroup direction={direction}> <ElButton type="primary" icon={<House />} aria-label="house" /> <ElButton type="primary" icon={<Operation />} aria-label="operation" /> <ElButton type="primary" icon={<Notification />} aria-label="notification" /> </ElButtonGroup> </> ); } Click the button to load data, then the button displays a loading state.
Set loading attribute to true to display loading state.
You can use the loading slot or loadingIcon to customize your loading component
ps: loading slot has higher priority than loadingIcon
"use client"; import { ElButton } from "@/components/element-plus/button"; import { ElIcon } from "@/components/element-plus/icon/ElIcon"; import { Eleme } from "@/components/element-plus/generated/icons"; function CustomLoading() { return ( <span className="docs-custom-loading"> <svg className="docs-custom-loading__circular" viewBox="-10 -10 50 50"> <path className="docs-custom-loading__path" d="M 30 15 L 28 17 M 25.61 25.61 A 15 15, 0, 0, 1, 15 30 A 15 15, 0, 1, 1, 27.99 7.5 L 15 15" style={{ strokeWidth: 4, fill: "rgba(0, 0, 0, 0)" }} /> </svg> </span> ); } export default function ButtonLoading() { return ( <> <ElButton type="primary" loading>Loading</ElButton> <ElButton type="primary" loadingIcon={<ElIcon className="is-loading"><Eleme /></ElIcon>} loading> Loading </ElButton> <ElButton type="primary" loadingIcon={<CustomLoading />} loading> Loading </ElButton> </> ); } Sizes
Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
Use attribute size to set additional sizes with large, small.
"use client"; import { ElButton } from "@/components/element-plus/button"; import { Search } from "@/components/element-plus/generated/icons"; import { flexRow, flexRowLast } from "./styles"; export default function ButtonSize() { return ( <> <div className={flexRow}> <ElButton size="large">Large</ElButton> <ElButton>Default</ElButton> <ElButton size="small">Small</ElButton> <ElButton size="large" icon={<Search />}> Search </ElButton> <ElButton icon={<Search />}>Search</ElButton> <ElButton size="small" icon={<Search />}> Search </ElButton> </div> <div className={flexRow}> <ElButton size="large" round>Large</ElButton> <ElButton round>Default</ElButton> <ElButton size="small" round>Small</ElButton> <ElButton size="large" icon={<Search />} round> Search </ElButton> <ElButton icon={<Search />} round> Search </ElButton> <ElButton size="small" icon={<Search />} round> Search </ElButton> </div> <div className={flexRowLast}> <ElButton icon={<Search />} size="large" circle aria-label="search" /> <ElButton icon={<Search />} circle aria-label="search" /> <ElButton icon={<Search />} size="small" circle aria-label="search" /> </div> </> ); } Tag 2.3.4
You can custom element tag, For example button, div, a, router-link, nuxt-link.
"use client"; import { ElButton } from "@/components/element-plus/button"; export default function ButtonTag() { return ( <> <ElButton>button</ElButton> <ElButton tag="div" role="button" tabIndex={0}>div</ElButton> <ElButton type="primary" tag="a" href="https://github.com/element-plus/element-plus" target="_blank" rel="noopener noreferrer" > a </ElButton> </> ); } Custom Color beta
You can custom button color.
We will calculate hover color & active color automatically.
The color prop also works with link and text buttons since 2.13.7 .
Default Plain Link Text Text BG Disabled Disabled Plain Disabled Link Disabled Text Disabled Text BG
"use client"; import { ElButton } from "@/components/element-plus/button"; const COLOR = "#626aef"; export default function ButtonCustom() { return ( <div> <ElButton color={COLOR}>Default</ElButton> <ElButton color={COLOR} plain>Plain</ElButton> <ElButton color={COLOR} link>Link</ElButton> <ElButton color={COLOR} text>Text</ElButton> <ElButton color={COLOR} text bg>Text BG</ElButton> <ElButton color={COLOR} disabled>Disabled</ElButton> <ElButton color={COLOR} disabled plain>Disabled Plain</ElButton> <ElButton color={COLOR} disabled link>Disabled Link</ElButton> <ElButton color={COLOR} disabled text>Disabled Text</ElButton> <ElButton color={COLOR} disabled text bg>Disabled Text BG</ElButton> </div> ); } Name Description Type Default size button size enum— type button type, when setting color, the latter prevails enum— plain determine whether it's a plain button booleanfalse text 2.2.0 determine whether it's a text button booleanfalse bg 2.2.0 determine whether the text button background color is always on booleanfalse link 2.2.1 determine whether it's a link button booleanfalse round determine whether it's a round button booleanfalse circle determine whether it's a circle button booleanfalse dashed 2.13.3 determine whether it's a dashed button booleanfalse loading determine whether it's loading booleanfalse loading-icon customize loading icon component stringComponentLoading disabled disable the button booleanfalse icon icon component stringComponent— autofocus same as native button's autofocus booleanfalse native-type same as native button's type enumbutton auto-insert-space automatically insert a space between two chinese characters(this will only take effect when the text length is 2 and all characters are in Chinese.) booleanfalse color custom button color, automatically calculate hover and active color. Works with link/text buttons since 2.13.7 string— dark dark mode, which automatically converts color to dark mode colors booleanfalse tag 2.3.4 custom element tag stringComponentbutton
Name Description default customize default content loading customize loading component icon customize icon component
Name Description Type ref button html element objectsize button size objecttype button type objectdisabled button disabled objectshouldAddSpace whether adding space object
Name Description Type Default size control the size of buttons in this button-group enum— type control the type of buttons in this button-group enum— direction 2.11.9 display direction enumhorizontal
Name Description Subtags default customize button group content Button
