Button

Brief Introduction

The button component is a fundamental interactive element for common operations, such as form submission. You can use <MYButton></MYButton> or <MYButton /> to implement a button.

About Color Usage

type

Using type in MYButton defines the button's color. These colors are the basic definitions provided by mengyue-components. For example, use type to achieve the following color definitions. If type is not specified, the default is a transparent color:

Code Demo

Note: The demo effect has some element magnification. For specific dimensions, please read the About Size description below.

<template>
    <MYButton>Default Button</MYButton>
    <MYButton type='primary'>Primary Button</MYButton>
    <MYButton type='success'>Success Button</MYButton>
    <MYButton type='warning'>Warning Button</MYButton>
    <MYButton type='danger'>Danger Button</MYButton>
    <MYButton type='info'>Info Button</MYButton>
</template>

展开代码

colorBg

If the above colors do not meet your needs, you can customize the color. Use colorBg to customize the button background color. For example, using a red background here:

Code Demo

If the colorBg API is used, the type attribute will be overridden by the colorBg attribute.

<template>
    <MYButton colorBg='#ff0000'>Hex Custom Red Background Button</MYButton>
    <MYButton colorBg='red'>Named Color Custom Red Background Button</MYButton>
</template>

展开代码

colorText

The MYButton also supports custom text color. Use colorText to customize the button's text color.

Code Demo

<template>
    <MYButton colorText='#ff0000'>Hex Custom Red Text Button</MYButton>
    <MYButton colorText='red'>Named Color Custom Red Text Button</MYButton>
</template>

展开代码

colorBorder

Customize the button border color. Use colorBorder to customize the button's border color.

Code Demo

<template>
    <MYButton colorBorder='#FF7F50'>Hex Custom Orange Border Button</MYButton>
    <MYButton colorBorder='orange'>Named Color Custom Orange Border Button</MYButton>
</template>

展开代码

plain

Use the plain attribute to render the button with a transparent style, which can be combined with the custom colors above to achieve unique appearances.

Code Demo

Note: The demo effect has some element magnification. For specific dimensions, please read the About Size description below.

<template>
    <MYButton plain>Default Button</MYButton>
    <MYButton plain type='primary'>Primary Button</MYButton>
    <MYButton plain type='success'>Success Button</MYButton>
    <MYButton plain type='warning'>Warning Button</MYButton>
    <MYButton plain type='danger'>Danger Button</MYButton>
    <MYButton plain type='info'>Info Button</MYButton>
</template>

展开代码

About Border Radius

round

Use round to make the button have rounded corners.

Code Demo

<template>
    <MYButton round>Rounded Button</MYButton>
</template>

展开代码

circle

Use circle to make the button circular.

Code Demo

The circle and round attributes cannot be used simultaneously.

<template>
    <MYButton circle>A</MYButton>
</template>

展开代码

About Size

size

Use the size attribute to adjust the button size.

Code Demo

Note: The demo effect has some element magnification. For specific dimensions, please read the About Size description below.

<template>
    <MYButton size='supersmall'>supersmall Button</MYButton>
    <MYButton size='small'>small Button</MYButton>
    <MYButton size='medium'>medium Button</MYButton>
    <MYButton size='large'>large Button</MYButton>
    <MYButton size='superbig'>superbig Button</MYButton>
</template>

展开代码

About Disabled

disabled

Use disabled to disable the button.

Code Demo

<template>
    <MYButton disabled>Disabled Button</MYButton>
</template>

展开代码

Insert Icon

Use the icon property or the default slot to insert an icon into the button.

Code Demo

<template>
    <MYButton>
        <MYPlus /> Button with Icon
    </MYButton>
</template>

展开代码

Finally, combine multiple APIs to create a customized button:

Code Demo

<template>
    <MYButton
        size='superbig'
        round
        plain
        colorBorder='#FF7F50'
        colorBg='#8d4dd1'
        colorText='red'
    >Combined Button</MYButton>
</template>

展开代码

API Reference

Props

Parameter	Description	Type	Optional Values	Default
type	Button type	string	primary / success / warning / danger / info	—
size	Button size	string	supersmall / small / medium / large / superbig	medium
plain	Whether it's a plain button	boolean	—	false
round	Whether it's a rounded button	boolean	—	false
circle	Whether it's a circular button	boolean	—	false
disabled	Whether disabled	boolean	—	false
colorBg	Background color	string	Supports hex colors or named colors	—
colorText	Text color	string	Supports hex colors or named colors	—
colorBorder	Border color	string	Supports hex colors or named colors	—
tag	Render tag	string	Supports all HTML tags	button

Type Definition

interface ButtonProps {
  type?: string;
  size?: string;
  plain?: boolean;
  round?: boolean;
  circle?: boolean;
  disabled?: boolean;
  colorBg?: string;
  colorText?: string;
  colorBorder?: string;
  iconOnly?: boolean;
  tag?: string;
}