<Button variant="default">Default</Button> <Button variant="secondary">Secondary</Button> <Button variant="outline">Outline</Button> <Button variant="ghost">Ghost</Button> <Button variant="destructive">Destructive</Button> <Button variant="link">Link</Button> <Button size="lg">Large</Button> <Button size="sm">Small</Button> <Button disabled>Disabled</Button> <Button loading>Loading</Button> <Button loading loadingMessage="Saving...">Save</Button>

<script lang="ts"> <SearchBar defaultValue={searchValue} placeholder="Search items..." onChange={(value) => { searchValue = value; console.log('Search value:', value); }} />