Button Component

Go back

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

<Button Variant="primary" Size="md" Text="Save changes" />

Secondary + primary pair

<Button Variant="secondary" Size="md" Text="Cancel" />
<Button Variant="primary"   Size="md" Text="Save changes" />

With leading icon

<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

<Button Variant="secondary" Size="md" IconOnly="true" LeadingIcon="@MyIcon" />
<Button Variant="tertiary"  Size="md" IconOnly="true" LeadingIcon="@MyIcon" />

Destructive confirmation

<Button Variant="secondary"          Size="md" Text="Cancel" />
<Button Variant="primary-destructive" Size="md" Text="Delete patient" />

Loading state

<Button Variant="primary"   Size="md" Text="Saving..." Loading="true" />
<Button Variant="secondary" Size="md" Text="Loading..." Loading="true" />

Disabled

<Button Variant="primary"   Size="md" Text="Save changes" Disabled="true" />
<Button Variant="secondary" Size="md" Text="Cancel"       Disabled="true" />

Size scale

<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" />