BrandUI Button - PrimerBlazor

Basic Button

<PrimerBrandButton>Default Button</PrimerBrandButton>

Variants

<PrimerStack Direction="StackDirection.Row" Gap="StackGap.Gap8">
    <PrimerBrandButton Variant="BrandButtonVariant.Primary">Primary</PrimerBrandButton>
    <PrimerBrandButton Variant="BrandButtonVariant.Accent">Accent</PrimerBrandButton>
    <PrimerBrandButton Variant="BrandButtonVariant.Secondary">Secondary</PrimerBrandButton>
    <PrimerBrandButton Variant="BrandButtonVariant.Subtle">Subtle</PrimerBrandButton>
</PrimerStack>

Sizes

<PrimerStack Direction="StackDirection.Row" Gap="StackGap.Gap8">
    <PrimerBrandButton Size="BrandButtonSize.Small">Small</PrimerBrandButton>
    <PrimerBrandButton>Medium (Default)</PrimerBrandButton>
    <PrimerBrandButton Size="BrandButtonSize.Large">Large</PrimerBrandButton>
</PrimerStack>

Icons

<PrimerStack Direction="StackDirection.Row" Gap="StackGap.Gap8">
    <PrimerBrandButton LeadingIcon="BrandIconName.Search16">With Icon</PrimerBrandButton>
    <PrimerBrandButton TrailingIcon="BrandIconName.TriangleDown16" Size="BrandButtonSize.Small">Dropdown</PrimerBrandButton>
    <PrimerBrandButton LeadingIcon="BrandIconName.Filter16" TrailingIcon="BrandIconName.TriangleDown16" Size="BrandButtonSize.Small">Filter</PrimerBrandButton>
</PrimerStack>

Block and Disabled

<PrimerStack Direction="StackDirection.Column" Gap="StackGap.Gap8" Width="300px">
    <PrimerBrandButton Block Size="BrandButtonSize.Small">Full Width</PrimerBrandButton>
    <PrimerBrandButton Disabled Size="BrandButtonSize.Small">Disabled</PrimerBrandButton>
</PrimerStack>

Button Group

<PrimerBrandButtonGroup>
    <PrimerBrandButton @onclick="HandleClick" Variant="BrandButtonVariant.Primary">Primary</PrimerBrandButton>
    <PrimerBrandButton @onclick="HandleClick" Variant="BrandButtonVariant.Secondary">Secondary</PrimerBrandButton>
</PrimerBrandButtonGroup>

Anchor Button

Go to GitHub

<PrimerBrandButton Href="https://github.com" Target="_blank" Variant="BrandButtonVariant.Secondary">
    Go to GitHub
</PrimerBrandButton>

Button Component Options

Available options for PrimerBrandButton

Name	Description	Default Value	CSS Class
Variant	Button style variant	Secondary	Button--{variant}
Size	Size of the button	Medium	Button--size-{size}
LeadingIcon	Icon displayed before text	null	leading-visual
TrailingIcon	Icon displayed after text	null	trailing-visual
Block	Button spans full width	false	Button--block
Disabled	Disables the button	false	Button--disabled
Href	If provided, renders as anchor	null	-
Target	Anchor tag target	_self	-
OnClick	Click event handler	-	-
ClassName / AdditionalClass	Extra CSS class	null	-

private void HandleClick(MouseEventArgs e)
{
	Console.WriteLine("Button clicked!");
}