跳转到内容
Proto UI
预览 Runtime
选择适配器 Runtime Web Components React Vue Vue 2
偏好与社区
语言
选择语言 / Select Language 简体中文 English 简体中文 English
社区

搜索

正在加载搜索…
Toggle theme

Button

正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<div class="flex flex-wrap items-center justify-center gap-3">
  <wc-shadcn-button>Default</wc-shadcn-button>
  <wc-shadcn-button variant="secondary">Secondary</wc-shadcn-button>
  <wc-shadcn-button variant="outline">Outline</wc-shadcn-button>
  <wc-shadcn-button variant="ghost">Ghost</wc-shadcn-button>
  <wc-shadcn-button variant="destructive">Destructive</wc-shadcn-button>
  <wc-shadcn-button variant="link">Link</wc-shadcn-button>
</div>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <ShadcnButton>Default</ShadcnButton>
      <ShadcnButton variant="secondary">Secondary</ShadcnButton>
      <ShadcnButton variant="outline">Outline</ShadcnButton>
      <ShadcnButton variant="ghost">Ghost</ShadcnButton>
      <ShadcnButton variant="destructive">Destructive</ShadcnButton>
      <ShadcnButton variant="link">Link</ShadcnButton>
    </div>
  );
}
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <ShadcnButton>Default</ShadcnButton>
    <ShadcnButton variant="secondary">Secondary</ShadcnButton>
    <ShadcnButton variant="outline">Outline</ShadcnButton>
    <ShadcnButton variant="ghost">Ghost</ShadcnButton>
    <ShadcnButton variant="destructive">Destructive</ShadcnButton>
    <ShadcnButton variant="link">Link</ShadcnButton>
  </div>
</template>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<template>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <ShadcnButton>Default</ShadcnButton>
    <ShadcnButton variant="secondary">Secondary</ShadcnButton>
    <ShadcnButton variant="outline">Outline</ShadcnButton>
    <ShadcnButton variant="ghost">Ghost</ShadcnButton>
    <ShadcnButton variant="destructive">Destructive</ShadcnButton>
    <ShadcnButton variant="link">Link</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

安装

Section titled “安装”
npm 

        npx @proto.ui/cli@latest add wc shadcn-button
npm 

        npx @proto.ui/cli@latest add react shadcn-button
npm 

        npx @proto.ui/cli@latest add vue shadcn-button

用法

Section titled “用法”

default 默认

Section titled “default 默认”
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button>Default</wc-shadcn-button>
</div>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonDefaultDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton>Default</ShadcnButton>
    </div>
  );
}
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton>Default</ShadcnButton>
  </div>
</template>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton>Default</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

secondary 次要

Section titled “secondary 次要”
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button variant="secondary">Secondary</wc-shadcn-button>
</div>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonSecondaryDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton variant="secondary">Secondary</ShadcnButton>
    </div>
  );
}
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="secondary">Secondary</ShadcnButton>
  </div>
</template>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="secondary">Secondary</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

outline 轮廓

Section titled “outline 轮廓”
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button variant="outline">Outline</wc-shadcn-button>
</div>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonOutlineDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton variant="outline">Outline</ShadcnButton>
    </div>
  );
}
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="outline">Outline</ShadcnButton>
  </div>
</template>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="outline">Outline</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

ghost 虚化

Section titled “ghost 虚化”
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<div id="ghost-demo" class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button variant="ghost">Ghost</wc-shadcn-button>
  <wc-shadcn-button variant="ghost" disabled>Disabled ghost</wc-shadcn-button>
  <div role="status" aria-live="polite">Enabled activations: 0; disabled activations: 0</div>
</div>
<script>
  const demo = document.querySelector('#ghost-demo');
  const buttons = demo.querySelectorAll('wc-shadcn-button');
  const counts = [0, 0];
  buttons.forEach((button, index) => button.addEventListener('click', (event) => {
    if (!(event instanceof CustomEvent) || event.target !== button) return;
    counts[index]++;
    demo.querySelector('[role="status"]').textContent =
      'Enabled activations: ' + counts[0] + '; disabled activations: ' + counts[1];
  }));
</script>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
import { useState } from 'react';
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonGhostDemo() {
  const [enabled, setEnabled] = useState(0);
  const [disabled, setDisabled] = useState(0);
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton variant="ghost" onClick={() => setEnabled((n) => n + 1)}>Ghost</ShadcnButton>
      <ShadcnButton variant="ghost" disabled onClick={() => setDisabled((n) => n + 1)}>Disabled ghost</ShadcnButton>
      <div role="status" aria-live="polite">Enabled activations: {enabled}; disabled activations: {disabled}</div>
    </div>
  );
}
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<script setup lang="ts">
import { ref } from 'vue';
import { ShadcnButton } from '../proto-ui/components/vue';
const enabled = ref(0);
const disabled = ref(0);
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="ghost" @click="enabled++">Ghost</ShadcnButton>
    <ShadcnButton variant="ghost" disabled @click="disabled++">Disabled ghost</ShadcnButton>
    <div role="status" aria-live="polite">Enabled activations: {{ enabled }}; disabled activations: {{ disabled }}</div>
  </div>
</template>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="ghost" @click="enabled++">Ghost</ShadcnButton>
    <ShadcnButton variant="ghost" disabled @click="disabled++">Disabled ghost</ShadcnButton>
    <div role="status" aria-live="polite">Enabled activations: {{ enabled }}; disabled activations: {{ disabled }}</div>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';
export default {
  components: { ShadcnButton },
  data() { return { enabled: 0, disabled: 0 }; },
};
</script>

destructive 危险

Section titled “destructive 危险”
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button variant="destructive">Destructive</wc-shadcn-button>
</div>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonDestructiveDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton variant="destructive">Destructive</ShadcnButton>
    </div>
  );
}
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="destructive">Destructive</ShadcnButton>
  </div>
</template>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton variant="destructive">Destructive</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

size 尺寸

Section titled “size 尺寸”
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<div class="flex flex-wrap items-center justify-center gap-3">
  <wc-shadcn-button size="sm">Small</wc-shadcn-button>
  <wc-shadcn-button>Default</wc-shadcn-button>
  <wc-shadcn-button size="lg">Large</wc-shadcn-button>
  <wc-shadcn-button size="icon" variant="outline">+</wc-shadcn-button>
</div>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonSizesDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <ShadcnButton size="sm">Small</ShadcnButton>
      <ShadcnButton>Default</ShadcnButton>
      <ShadcnButton size="lg">Large</ShadcnButton>
      <ShadcnButton size="icon" variant="outline">
        +
      </ShadcnButton>
    </div>
  );
}
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <ShadcnButton size="sm">Small</ShadcnButton>
    <ShadcnButton>Default</ShadcnButton>
    <ShadcnButton size="lg">Large</ShadcnButton>
    <ShadcnButton size="icon" variant="outline">+</ShadcnButton>
  </div>
</template>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<template>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <ShadcnButton size="sm">Small</ShadcnButton>
    <ShadcnButton>Default</ShadcnButton>
    <ShadcnButton size="lg">Large</ShadcnButton>
    <ShadcnButton size="icon" variant="outline">+</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

disabled 禁用

Section titled “disabled 禁用”
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<div class="flex flex-wrap items-center gap-3">
  <wc-shadcn-button disabled>Disabled</wc-shadcn-button>
</div>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonDisabledDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ShadcnButton disabled>Disabled</ShadcnButton>
    </div>
  );
}
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<script setup lang="ts">
import { ShadcnButton } from '../proto-ui/components/vue';
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton disabled>Disabled</ShadcnButton>
  </div>
</template>
正在加载交互示例… 正文和源码已可阅读，交互控件就绪后会显示在这里。 
<template>
  <div class="flex flex-wrap items-center gap-3">
    <ShadcnButton disabled>Disabled</ShadcnButton>
  </div>
</template>

<script>
import { ShadcnButton } from '../proto-ui/components/vue2';

export default {
  components: {
    ShadcnButton,
  },
};
</script>

API 参考

Section titled “API 参考”
字段 类型 默认值
variant 'default' 'destructive' 'outline' 'secondary' 'ghost' 'link' default
size 'default' 'sm' 'lg' 'icon' default
disabled boolean false

参考依据

Section titled “参考依据”