Button | Sard

介绍

按钮用于开始一个即时操作。

代码演示

颜色与变体

variant 属性用于配置按钮的变体，color 属性用于配置按钮的主题色。

vue

<template>
  <s-flex vertical gap="medium">
    <s-flex wrap gap="medium">
      <s-button color="primary" variant="solid">Solid</s-button>
      <s-button color="primary" variant="outlined">Outlined</s-button>
      <s-button color="primary" variant="dashed">Dashed</s-button>
      <s-button color="primary" variant="filled">Filled</s-button>
      <s-button color="primary" variant="text">Text</s-button>
      <s-button color="primary" variant="link">Link</s-button>
    </s-flex>
    <s-flex wrap gap="medium">
      <s-button color="secondary" variant="solid">Solid</s-button>
      <s-button color="secondary" variant="outlined">Outlined</s-button>
      <s-button color="secondary" variant="dashed">Dashed</s-button>
      <s-button color="secondary" variant="filled">Filled</s-button>
      <s-button color="secondary" variant="text">Text</s-button>
      <s-button color="secondary" variant="link">Link</s-button>
    </s-flex>
    <s-flex wrap gap="medium">
      <s-button color="success" variant="solid">Solid</s-button>
      <s-button color="success" variant="outlined">Outlined</s-button>
      <s-button color="success" variant="dashed">Dashed</s-button>
      <s-button color="success" variant="filled">Filled</s-button>
      <s-button color="success" variant="text">Text</s-button>
      <s-button color="success" variant="link">Link</s-button>
    </s-flex>
    <s-flex wrap gap="medium">
      <s-button color="warning" variant="solid">Solid</s-button>
      <s-button color="warning" variant="outlined">Outlined</s-button>
      <s-button color="warning" variant="dashed">Dashed</s-button>
      <s-button color="warning" variant="filled">Filled</s-button>
      <s-button color="warning" variant="text">Text</s-button>
      <s-button color="warning" variant="link">Link</s-button>
    </s-flex>
    <s-flex wrap gap="medium">
      <s-button color="danger" variant="solid">Solid</s-button>
      <s-button color="danger" variant="outlined">Outlined</s-button>
      <s-button color="danger" variant="dashed">Dashed</s-button>
      <s-button color="danger" variant="filled">Filled</s-button>
      <s-button color="danger" variant="text">Text</s-button>
      <s-button color="danger" variant="link">Link</s-button>
    </s-flex>
    <div class="bg-black p-1">
      <s-flex wrap gap="medium">
        <s-button color="white" variant="solid">Solid</s-button>
        <s-button color="white" variant="outlined">Outlined</s-button>
        <s-button color="white" variant="dashed">Dashed</s-button>
        <s-button color="white" variant="filled">Filled</s-button>
        <s-button color="white" variant="text">Text</s-button>
        <s-button color="white" variant="link">Link</s-button>
      </s-flex>
    </div>
    <div class="bg-white p-1">
      <s-flex wrap gap="medium">
        <s-button color="black" variant="solid">Solid</s-button>
        <s-button color="black" variant="outlined">Outlined</s-button>
        <s-button color="black" variant="dashed">Dashed</s-button>
        <s-button color="black" variant="filled">Filled</s-button>
        <s-button color="black" variant="text">Text</s-button>
        <s-button color="black" variant="link">Link</s-button>
      </s-flex>
    </div>
  </s-flex>
</template>

自定义颜色

如果内置主题色不合适，可以自定义颜色。使用 color 和 background 属性定义字体颜色和背景色。

vue

<template>
  <s-flex wrap gap="medium">
    <s-button variant="solid" style="background: fuchsia">Solid</s-button>
    <s-button variant="outlined" style="color: fuchsia; border-color: fuchsia">Outlined</s-button>
    <s-button variant="dashed" style="color: fuchsia; border-color: fuchsia">Dashed</s-button>
    <s-button variant="filled" style="color: fuchsia; background: rgb(255 0 255 / 8%)">
      Filled
    </s-button>
    <s-button variant="text" style="color: fuchsia">Text</s-button>
    <s-button variant="link" style="color: fuchsia">Link</s-button>
    <s-button style="background: linear-gradient(to right, orange, fuchsia)">渐变色</s-button>
  </s-flex>
</template>

圆形按钮

使用 round 属性设置为圆形按钮。

vue

<template>
  <s-flex wrap gap="medium">
    <s-button round variant="solid">Solid</s-button>
    <s-button round variant="outlined">Outlined</s-button>
    <s-button round variant="dashed">Dashed</s-button>
    <s-button round variant="filled">Filled</s-button>
    <s-button round variant="text">Text</s-button>
    <s-button round variant="link">Link</s-button>
  </s-flex>
</template>

方形按钮

使用 square 属性设置为方形按钮。

vue

<template>
  <s-flex wrap gap="medium">
    <s-button square variant="solid">Solid</s-button>
    <s-button square variant="outlined">Outlined</s-button>
    <s-button square variant="dashed">Dashed</s-button>
    <s-button square variant="filled">Filled</s-button>
    <s-button square variant="text">Text</s-button>
    <s-button square variant="link">Link</s-button>
  </s-flex>
</template>

禁用按钮

禁用状态的按钮不可点击。

vue

<template>
  <s-flex wrap gap="medium">
    <s-button disabled variant="solid">Solid</s-button>
    <s-button disabled variant="outlined">Outlined</s-button>
    <s-button disabled variant="dashed">Dashed</s-button>
    <s-button disabled variant="filled">Filled</s-button>
    <s-button disabled variant="text">Text</s-button>
    <s-button disabled variant="link">Link</s-button>
  </s-flex>
</template>

按钮尺寸

内置四种尺寸以供选择。

vue

<template>
  <s-flex wrap align="center" gap="medium">
    <s-button size="xs">迷你尺寸</s-button>
    <s-button size="small">小尺寸</s-button>
    <s-button size="medium">默认尺寸</s-button>
    <s-button size="large">大尺寸</s-button>
  </s-flex>
</template>

加载中

加载中的按钮不可点击。

vue

<template>
  <s-flex wrap align="center" gap="medium">
    <s-button size="xs" loading>加载中</s-button>
    <s-button size="small" loading>加载中</s-button>
    <s-button loading>加载中</s-button>
    <s-button size="large" loading loading-type="clock">加载中</s-button>
  </s-flex>
</template>

块级按钮

使用 block 属性将按钮设为块级元素。

vue

<template>
  <s-button block class="mb-3" size="xs">迷你尺寸</s-button>
  <s-button block class="mb-3" size="small">小尺寸</s-button>
  <s-button block class="mb-3" size="medium">默认尺寸</s-button>
  <s-button block class="mb-3" size="large">大尺寸</s-button>
</template>

图标按钮

可通过 icon 插槽设置图标，相对于通过默认插槽添加图标，前者会有默认的样式，并可与 loading 相切换。

vue tsvue js

vue

<template>
  <s-flex vertical gap="medium">
    <s-flex align="center" gap="medium">
      <s-button :loading="loading" variant="filled" size="xs" #icon>
        <Plus />
      </s-button>
      <s-button :loading="loading" variant="filled" size="small" #icon>
        <Plus />
      </s-button>
      <s-button :loading="loading" variant="filled" size="medium" #icon>
        <Plus />
      </s-button>
      <s-button :loading="loading" variant="filled" size="large" #icon>
        <Plus />
      </s-button>
    </s-flex>

    <s-flex align="center" gap="medium">
      <s-button :loading="loading" round size="xs" #icon>
        <Plus />
      </s-button>
      <s-button :loading="loading" round size="small" #icon>
        <Plus />
      </s-button>
      <s-button :loading="loading" round size="medium" #icon>
        <Plus />
      </s-button>
      <s-button :loading="loading" round size="large" #icon>
        <Plus />
      </s-button>
    </s-flex>

    <s-flex align="center" gap="medium">
      <s-button :loading="loading" variant="outlined" size="xs">
        <template #icon>
          <Plus />
        </template>
        按钮
      </s-button>
      <s-button :loading="loading" variant="outlined" size="small">
        <template #icon>
          <Plus />
        </template>
        按钮
      </s-button>
      <s-button :loading="loading" variant="outlined" size="medium">
        <template #icon>
          <Plus />
        </template>
        按钮
      </s-button>
      <s-button :loading="loading" variant="outlined" size="large">
        <template #icon>
          <Plus />
        </template>
        按钮
      </s-button>
    </s-flex>

    <s-button @click="loading = !loading">Toggle loading</s-button>
  </s-flex>
</template>

<script setup lang="ts">
import { Plus } from '@sard/icons'
import { ref } from 'vue'
const loading = ref(false)
</script>

vue

<template>
  <s-flex vertical gap="medium">
    <s-flex align="center" gap="medium">
      <s-button :loading="loading" variant="filled" size="xs" #icon>
        <Plus />
      </s-button>
      <s-button :loading="loading" variant="filled" size="small" #icon>
        <Plus />
      </s-button>
      <s-button :loading="loading" variant="filled" size="medium" #icon>
        <Plus />
      </s-button>
      <s-button :loading="loading" variant="filled" size="large" #icon>
        <Plus />
      </s-button>
    </s-flex>

    <s-flex align="center" gap="medium">
      <s-button :loading="loading" round size="xs" #icon>
        <Plus />
      </s-button>
      <s-button :loading="loading" round size="small" #icon>
        <Plus />
      </s-button>
      <s-button :loading="loading" round size="medium" #icon>
        <Plus />
      </s-button>
      <s-button :loading="loading" round size="large" #icon>
        <Plus />
      </s-button>
    </s-flex>

    <s-flex align="center" gap="medium">
      <s-button :loading="loading" variant="outlined" size="xs">
        <template #icon>
          <Plus />
        </template>
        按钮
      </s-button>
      <s-button :loading="loading" variant="outlined" size="small">
        <template #icon>
          <Plus />
        </template>
        按钮
      </s-button>
      <s-button :loading="loading" variant="outlined" size="medium">
        <template #icon>
          <Plus />
        </template>
        按钮
      </s-button>
      <s-button :loading="loading" variant="outlined" size="large">
        <template #icon>
          <Plus />
        </template>
        按钮
      </s-button>
    </s-flex>

    <s-button @click="loading = !loading">Toggle loading</s-button>
  </s-flex>
</template>

<script setup lang="js">
import { Plus } from '@sard/icons'
import { ref } from 'vue'
const loading = ref(false)
</script>

幽灵按钮

使用 ghost 属性设置为幽灵按钮。

vue

<template>
  <div class="p-3 bg-gray-300">
    <s-flex wrap gap="medium">
      <s-button ghost color="primary" variant="outlined">Outlined</s-button>
      <s-button ghost color="primary" variant="dashed">Dashed</s-button>
    </s-flex>
  </div>
</template>

API

ButtonProps

属性	描述	类型	默认值
variant	按钮变体	'solid' \| 'outlined' \| 'dashed' \| 'filled' \| 'text' \| 'link'	'solid'
color	按钮主题色	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'neutral' \| 'white' \| 'black'	'primary'
size	按钮尺寸	'xs' \| 'small' \| 'medium' \| 'large'	'medium'
round	圆角按钮	boolean	false
square	方形按钮	boolean	false
disabled	禁用按钮	boolean	false
loading	加载状态	boolean	false
loadingType	加载类型	'clock' \| 'circular'	'circular'
block	将按钮设为块级元素	boolean	false
html-type	原生按钮类型	'button' \| 'submit' \| 'reset'	'button'
ghost	幽灵按钮	boolean	false
auto-height	是否自动高度	boolean	false
compact	紧凑样式，会去掉高度和内边距	boolean	false

ButtonSlots

插槽	描述	属性
default	自定义默认内容	-
icon	自定义图标内容	-

ButtonEmits

事件	描述	类型
click	点击按钮时触发，加载和禁用状态不会触发	`(event: MouseEvent) => void`

主题定制

样式变量

CSS 变量	值
`--s-button-height-xs`	`var(--s-size-xl)`
`--s-button-padding-y-xs`	`0`
`--s-button-padding-x-xs`	`6px`
`--s-button-border-radius-xs`	`var(--s-border-radius-sm)`
`--s-button-font-size-xs`	`var(--s-font-size-sm)`
`--s-button-icon-size-xs`	`var(--s-font-size-sm)`
`--s-button-height-sm`	`var(--s-size-2xl)`
`--s-button-padding-y-sm`	`0`
`--s-button-padding-x-sm`	`9px`
`--s-button-border-radius-sm`	`var(--s-border-radius-sm)`
`--s-button-font-size-sm`	`var(--s-font-size-sm)`
`--s-button-icon-size-sm`	`var(--s-font-size)`
`--s-button-height`	`var(--s-size-3xl)`
`--s-button-padding-y`	`0`
`--s-button-padding-x`	`11px`
`--s-button-border-radius`	`var(--s-border-radius)`
`--s-button-font-size`	`var(--s-font-size)`
`--s-button-icon-size`	`18px`
`--s-button-height-lg`	`var(--s-size-4xl)`
`--s-button-padding-y-lg`	`0`
`--s-button-padding-x-lg`	`14px`
`--s-button-border-radius-lg`	`var(--s-border-radius)`
`--s-button-font-size-lg`	`var(--s-font-size-lg)`
`--s-button-icon-size-lg`	`20px`
`--s-button-outlined-bg`	`var(--s-white)`
`--s-button-secondary-color`	`var(--s-gray-800)`

介绍 ​

代码演示 ​

颜色与变体 ​

自定义颜色 ​

圆形按钮 ​

方形按钮 ​

禁用按钮 ​

按钮尺寸 ​

加载中 ​

块级按钮 ​

图标按钮 ​

幽灵按钮 ​

API ​

ButtonProps ​

ButtonSlots ​

ButtonEmits ​

主题定制 ​

样式变量 ​

介绍