Skip to content
Proto UI
Preview runtime
选择适配器 Runtime Web Components React Vue Vue 2
Preferences and community
Language
选择语言 / Select Language English English 简体中文 简体中文
Community

Search

Loading search…
Toggle theme

Button

A Shadcn-styled button projected through Proto UI adapters.

The Button prototype keeps one canonical demo per supported runtime. Use the adapter selector in the page chrome to compare the same semantic surface across implementations.

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready. 
<div class="flex flex-wrap items-center justify-center gap-3">
  <wc-shadcn-button>Default</wc-shadcn-button>
  <div>
    <wc-shadcn-button>Default2</wc-shadcn-button>
  </div>
  <wc-shadcn-button variant="outline">Outline</wc-shadcn-button>
  <wc-shadcn-button variant="destructive">Destructive</wc-shadcn-button>
  <wc-shadcn-button variant="ghost" size="icon">+</wc-shadcn-button>
  <wc-shadcn-button disabled>Disabled</wc-shadcn-button>
</div>
Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready. 
import { ShadcnButton } from '../proto-ui/components/react';

export function DemoButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <ShadcnButton>Default</ShadcnButton>
      <div>
        <ShadcnButton>Default2</ShadcnButton>
      </div>
      <ShadcnButton variant="outline">Outline</ShadcnButton>
      <ShadcnButton variant="destructive">Destructive</ShadcnButton>
      <ShadcnButton variant="ghost" size="icon">
        +
      </ShadcnButton>
      <ShadcnButton disabled>Disabled</ShadcnButton>
    </div>
  );
}
Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready. 
<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>
    <div>
      <ShadcnButton>Default2</ShadcnButton>
    </div>
    <ShadcnButton variant="outline">Outline</ShadcnButton>
    <ShadcnButton variant="destructive">Destructive</ShadcnButton>
    <ShadcnButton variant="ghost" size="icon">+</ShadcnButton>
    <ShadcnButton disabled>Disabled</ShadcnButton>
  </div>
</template>
Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready. 
<template>
  <div class="flex flex-wrap items-center justify-center gap-3">
    <ShadcnButton>Default</ShadcnButton>
    <div>
      <ShadcnButton>Default2</ShadcnButton>
    </div>
    <ShadcnButton variant="outline">Outline</ShadcnButton>
    <ShadcnButton variant="destructive">Destructive</ShadcnButton>
    <ShadcnButton variant="ghost" size="icon">+</ShadcnButton>
    <ShadcnButton disabled>Disabled</ShadcnButton>
  </div>
</template>

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

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