Button

Maps to Arco Button: the default button is Arco's secondary (gray fill, no border), plain maps to outline, dashed to dashed and text to text. See the Element Plus docs for props.

Types

The default button is the gray secondary; plain is outlined, dashed uses a dashed border, text and link are text buttons.

<template>
  <el-button type="primary">Primary</el-button>
  <el-button>Default</el-button>
  <el-button type="primary" plain>Plain</el-button>
  <el-button dashed>Dashed</el-button>
  <el-button text>Text</el-button>
  <el-button link type="primary">Link</el-button>
</template>

Status Colors

success / warning / danger map to Arco statuses. Arco has no info status, so info uses neutral gray.

<template>
  <el-button type="success">Success</el-button>
  <el-button type="warning">Warning</el-button>
  <el-button type="danger">Danger</el-button>
  <el-button type="info">Info</el-button>
  <el-button type="success" plain>Success</el-button>
  <el-button type="warning" plain>Warning</el-button>
  <el-button type="danger" plain>Danger</el-button>
</template>

Sizes & States

small / default / large map to Arco small / medium / large (28 / 32 / 36px); icons, round, loading and disabled.

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
</script>

<template>
  <el-button type="primary" size="small">Small</el-button>
  <el-button type="primary">Default</el-button>
  <el-button type="primary" size="large">Large</el-button>
  <el-button type="primary" :icon="Search" circle />
  <el-button :icon="Search" round>Round</el-button>
  <el-button type="primary" loading>Loading</el-button>
  <el-button type="primary" disabled>Disabled</el-button>
  <el-button disabled>Disabled</el-button>
</template>

Button Group

Solid buttons sit side by side with a divider on the right border; outlined buttons overlap by 1px; only the two ends are rounded.

<template>
  <el-button-group>
    <el-button>Left</el-button>
    <el-button>Middle</el-button>
    <el-button>Right</el-button>
  </el-button-group>
  <el-button-group>
    <el-button type="primary">Left</el-button>
    <el-button type="primary">Middle</el-button>
    <el-button type="primary">Right</el-button>
  </el-button-group>
  <el-button-group>
    <el-button type="primary" plain>Left</el-button>
    <el-button type="primary" plain>Middle</el-button>
    <el-button type="primary" plain>Right</el-button>
  </el-button-group>
</template>

Differences from Arco

• Different icon set: the loading icon and others come from Element Plus.
• A loading button has the disabled attribute and cannot receive focus (Element Plus behavior).
• Arco has no vertical button group, so direction="vertical" keeps the Element Plus look.