Button Component
Primary
Secondary Gray
Secondary Color
Tertiary Gray
Tertiary Color
Link Gray
Link Color
Destructive Variants
Primary Destructive
Secondary Destructive
Tertiary Destructive
Link Destructive
Usage examples
Copy-paste-ready examples covering the most common button patterns. For the full variant catalog scroll to the top of this page.
Primary with label
Simplest call to action
razor
<Button Variant="primary" Size="md" Text="Save changes" />Secondary + primary pair
Form footer action row
razor
<Button Variant="secondary" Size="md" Text="Cancel" />
<Button Variant="primary" Size="md" Text="Save changes" />With leading icon
Icon before the label
razor
<Button Variant="primary" Size="md" Text="Add patient" LeadingIcon="@MyIcon" />
<Button Variant="secondary" Size="md" Text="Export" LeadingIcon="@MyIcon" />
@code {
private RenderFragment MyIcon => @<svg class="btn-icon" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" /></svg>;
}Icon only
Square icon button
razor
<Button Variant="secondary" Size="md" IconOnly="true" LeadingIcon="@MyIcon" />
<Button Variant="tertiary" Size="md" IconOnly="true" LeadingIcon="@MyIcon" />Destructive confirmation
Delete action
razor
<Button Variant="secondary" Size="md" Text="Cancel" />
<Button Variant="primary-destructive" Size="md" Text="Delete patient" />Loading state
Async submission feedback
razor
<Button Variant="primary" Size="md" Text="Saving..." Loading="true" />
<Button Variant="secondary" Size="md" Text="Loading..." Loading="true" />Disabled
Inert state
razor
<Button Variant="primary" Size="md" Text="Save changes" Disabled="true" />
<Button Variant="secondary" Size="md" Text="Cancel" Disabled="true" />Size scale
sm / md / lg / xl / 2xl
razor
<Button Variant="primary" Size="sm" Text="Small" />
<Button Variant="primary" Size="md" Text="Medium" />
<Button Variant="primary" Size="lg" Text="Large" />
<Button Variant="primary" Size="xl" Text="X-Large" />
<Button Variant="primary" Size="2xl" Text="2X-Large" />