SchaltflächeLöst Aktionen bei Klick oder Tippen aus.

Button
import Button from '@/components/Button';
export function Example() {  return (    <>      <Button $type="default">Default</Button>      <Button $type="secondary">Secondary</Button>      <Button $type="outline">Outline</Button>      <Button $type="ghost">Ghost</Button>      <Button $type="destructive">Destructive</Button>      <Button $type="link">Link</Button>    </>  );}

Button (sizes)
import Button from '@/components/Button';
export function Example() {  return (    <>      <Button $size="xs">Extra Small</Button>      <Button $size="s">Small</Button>      <Button $size="default">Default</Button>      <Button $size="l">Large</Button>    </>  );}

Button (with icons)
import Button from '@/components/Button';import { Plus, Download, Star, Settings, Heart } from 'lucide-react';
export function Example() {  return (    <>      <Button><Plus /> Add Lorem</Button>      <Button $type="secondary"><Download /> Download</Button>      <Button $type="outline"><Star /> Favorite</Button>      <Button><Settings /></Button>      <Button><Heart /></Button>    </>  );}

Button ($loading)
import Button from '@/components/Button';
export function Example() {  return (    <>      <Button $loading>Loading Lorem</Button>      <Button $type="secondary" $loading>Processing</Button>      <Button $size="s" $loading>Small Loading</Button>    </>  );}

Button (states and variants)
import Button from '@/components/Button';
export function Example() {  return (    <>      <Button>Normal</Button>      <Button disabled>Disabled</Button>      <Button $round>Round Button</Button>      <Button $block>Block Button</Button>      <Button $blockOnMobile>Block on mobile</Button>    </>  );}