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