Skip to content
Proto UI

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.

<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>
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>
  );
}
<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>
<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>