Button

Brief Introduction

The Button component is a classic interactive element, commonly used as an action button for form submission and other purposes. You can use <MYButton></MYButton> or <MYButton /> to implement a button.

Using Colors

type

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

Code Demo

Note: The demo elements are slightly enlarged. Please refer to the Size section below for specific dimensions.

<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>

展开代码

colorBackground

Of course, if the above colors don't meet your needs, you can customize the button background color using colorBackground. For example, using a red background:

Code Demo

If you use the colorBackground API, the type property will be overridden by the colorBackground property.

<template>
    <MYButton colorBackground='#ff0000'>Custom red background button (hex)</MYButton>
    <MYButton colorBackground='red'>Custom red background button (named)</MYButton>
</template>

展开代码

colorText

The MYButton component also supports custom text color using colorText.

Code Demo

<template>
    <MYButton colorText='#ff0000'>Custom red text button (hex)</MYButton>
    <MYButton colorText='red'>Custom red text button (named)</MYButton>
</template>

展开代码

colorBorder

Customize the button border color using colorBorder.

Code Demo

<template>
    <MYButton colorBorder='#FF7F50'>Custom orange border button (hex)</MYButton>
    <MYButton colorBorder='orange'>Custom orange border button (named)</MYButton>
</template>

展开代码

plain

Use the plain property to render the button with a transparent style, allowing you to achieve different looks when combined with custom colors.

Code Demo

Note: The demo elements are slightly enlarged. Please refer to the Size section below for specific dimensions.

<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>

展开代码

Rounded Corners

rounded

Use rounded to make the button have rounded corners.

Code Demo

<template>
    <MYButton rounded>Rounded Button</MYButton>
</template>

展开代码

circular

Use circular to make the button circular.

Code Demo

The circular and rounded properties cannot be used simultaneously.

<template>
    <MYButton circular>A</MYButton>
</template>

展开代码

Sizes

size

Use the size property to adjust the button size.

Code Demo

Note: The demo elements are slightly enlarged. Please refer to the Size section above for specific dimensions.

<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>

展开代码

Disabled State

disabled

Use disabled to disable the button.

Code Demo

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

展开代码

Adding Icons

Use the icon property to add an icon to the button.

Code Demo

<template>
    <MYButton icon="MYPlus">Button with Icon</MYButton>
</template>

展开代码

Finally, here's an example combining multiple APIs to create a custom button:

Code Demo

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

展开代码

API Reference

Props

Prop	Description	Type	Options	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
rounded	Whether it has rounded corners	boolean	—	false
circular	Whether it's circular	boolean	—	false
disabled	Whether it's disabled	boolean	—	false
colorBackground	Background color	string	Hex or named color	—
colorText	Text color	string	Hex or named color	false
colorBorder	Border color	string	Hex or named color	—
tag	Rendered HTML tag	string	Any HTML tag	button

Type Definitions

interface ButtonProps {
  type?: string;
  size?: string;
  plain?: boolean;
  rounded?: boolean;
  circular?: boolean;
  disabled?: boolean;
  colorBackground?: string;
  colorText?: string;
  colorBorder?: string;
  iconOnly?: boolean;
  tag?: string;
}