# Button

Commonly used action buttons.

# size

There are three types of button sizes

  • Large button
  • Medium button（default）
  • Small button
Small button Medium button Large button
<amber-button type="primary" size="small">Small button</amber-button>
<amber-button type="primary" size="normal">Medium button</amber-button>
<amber-button type="primary" size="large" style="width: 126px">Large button</amber-button>
Expand Copy

# Button width adaptive

The side-by-side button can be used in two ways:

  • According to the text content, the button width is adaptive: Small buttons have a fixed spacing of 8px; medium buttons are 16px; large buttons are 24px.
  • Among them, the minimum width of small, medium and large buttons are: 58px, 74px, 96px
Small button Medium button Large button
<amber-button type="primary" size="small">Small button</amber-button>
<amber-button type="primary" size="normal">Medium button</amber-button>
<amber-button type="primary" size="large">Large button</amber-button>
Expand Copy

# 按钮分类

Plain button Plain button Plain button Plain button

Default button Main button Hint button Alert button

Text link Text link Text link Text link

Icon button Icon button Icon button Loading button

Rounded button Rounded button Rounded button
<amber-button plain="true" type="default">Plain button</amber-button>
<amber-button plain="true" type="primary">Plain button</amber-button>
<amber-button plain="true" type="warning">Plain button</amber-button>
<amber-button plain="true" type="danger">Plain button</amber-button>
<br/><br/>
<amber-button>Default button</amber-button>
<amber-button type="primary">Main button</amber-button>
<amber-button type="warning">Hint button</amber-button>
<amber-button type="danger">Alert button</amber-button>
<br/><br/>
<amber-button text>Text link</amber-button>
<amber-button text type="primary">Text link</amber-button>
<amber-button text type="warning">Text link</amber-button>
<amber-button text type="danger">Text link</amber-button>
<br/><br/>
<amber-button icon="a-yonghu3x" type="primary">Icon button</amber-button>
<amber-button icon="a-yonghu3x" type="warning">Icon button</amber-button>
<amber-button icon="a-yonghu3x" type="danger">Icon button</amber-button>
<amber-button type="primary" loading>Loading button</amber-button>
<br/><br/>
<amber-button type="primary" size="small" round>Rounded button</amber-button>
<amber-button type="primary" size="normal" round>Rounded button</amber-button>
<amber-button type="primary" size="large" round>Rounded button</amber-button>
Expand Copy

# disabled

Plain button

Default button Main button Hint button Alert button
<amber-button plain="true" type="default" disabled>Plain button</amber-button>
<br/><br/>
<amber-button disabled>Default button</amber-button>
<amber-button type="primary" disabled>Main button</amber-button>
<amber-button type="warning" disabled>Hint button</amber-button>
<amber-button type="danger" disabled>Alert button</amber-button>



<script>
  export default {
    mounted() {
      console.log(this.$icon)
    },
    methods: {
      click() {
        console.log('click')
      }
    }
  }
</script>
Expand Copy

# API

field explain type default
type The value can be Default, Primary, Warning, or Danger String -
size There are three types of button sizes: Small, Normal, and large String normal
disabled Disable button. In the disabled state, the button cannot be clicked. Boolean false
plain Use the plain property to set the button to a plain button, whose text is the color of the button and whose background is white 。 Boolean false
text Is it just a text button Boolean false
icon For the Icon before the button, refer to the Icon component String -
color The Icon before the button, refer to the Icon component to customize the color, including text and picture colors String -
loading loading state Boolean false

← Dropdown →