<div class="flex flex-wrap items-center gap-2">
<Button Variant="@Button.ButtonVariant.Outline">Button</Button>
<Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
</Button>
</div>Installation
Install the button component using the command or manual steps.
blazor-shadcn add buttonUsage
@using ShadcnBlazor.Components.UI<Button Variant="@Button.ButtonVariant.Outline">Button</Button>Examples
Size
Use the Size parameter to change the size of the button.
<div class="flex flex-col items-start gap-8 sm:flex-row">
<div class="flex items-start gap-2">
<Button Size="@Button.ButtonSize.Xs" Variant="@Button.ButtonVariant.Outline">Extra Small</Button>
<Button Size="@Button.ButtonSize.IconXs" Variant="@Button.ButtonVariant.Outline">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 7 10 10"/><path d="M17 7v10H7"/></svg>
</Button>
</div>
<div class="flex items-start gap-2">
<Button Size="@Button.ButtonSize.Sm" Variant="@Button.ButtonVariant.Outline">Small</Button>
<Button Size="@Button.ButtonSize.IconSm" Variant="@Button.ButtonVariant.Outline">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 7 10 10"/><path d="M17 7v10H7"/></svg>
</Button>
</div>
<div class="flex items-start gap-2">
<Button Variant="@Button.ButtonVariant.Outline">Default</Button>
<Button Size="@Button.ButtonSize.Icon" Variant="@Button.ButtonVariant.Outline">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 7 10 10"/><path d="M17 7v10H7"/></svg>
</Button>
</div>
<div class="flex items-start gap-2">
<Button Size="@Button.ButtonSize.Lg" Variant="@Button.ButtonVariant.Outline">Large</Button>
<Button Size="@Button.ButtonSize.IconLg" Variant="@Button.ButtonVariant.Outline">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 7 10 10"/><path d="M17 7v10H7"/></svg>
</Button>
</div>
</div>Default
<Button>Button</Button>Outline
<Button Variant="@Button.ButtonVariant.Outline">Outline</Button>Secondary
<Button Variant="@Button.ButtonVariant.Secondary">Secondary</Button>Ghost
<Button Variant="@Button.ButtonVariant.Ghost">Ghost</Button>Destructive
<Button Variant="@Button.ButtonVariant.Destructive">Destructive</Button>Link
<Button Variant="@Button.ButtonVariant.Link">Link</Button>Icon
<Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m8 12 2.5 2.5L16 9"/></svg>
</Button>With Icon
<Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
New Branch
</Button>Rounded
Use the rounded-full class to make the button rounded.
<Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Icon" Class="rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
</Button>Spinner
Render a Spinner inside the button to show a loading state.
<div class="flex flex-wrap items-center gap-2">
<Button Disabled="true">
<Spinner data-icon="inline-start" />
Loading...
</Button>
<Button Variant="@Button.ButtonVariant.Outline" Disabled="true">
<Spinner data-icon="inline-start" />
Loading...
</Button>
<Button Variant="@Button.ButtonVariant.Secondary" Disabled="true">
<Spinner data-icon="inline-start" />
Loading...
</Button>
</div>