Buttons

Overview

Buttons give people a way to trigger an action. They’re typically found in forms, dialog panels, and dialogs. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus.

Usage

Default Button
<Stack Horizontal="true" Tokens=@(new StackTokens() { ChildrenGap = new[] { 40.0 } })>
    <DefaultButton Text="Standard" OnClick=@(() => OnClickHandler("Default Standard")) Disabled="@Disabled" Checked="Checked" />
    <PrimaryButton OnClick=@(() => OnClickHandler("Default Primary")) Disabled="@Disabled" Checked="Checked">Primary</PrimaryButton>
</Stack>
            
            
Compound Button
<Stack Horizontal="true" Tokens=@(new StackTokens() { ChildrenGap = new[] { 40.0 } })>
    <CompoundButton Text="Standard" SecondaryText="This is the secondary text." OnClick=@(() => OnClickHandler("Compound Standard")) Disabled=@Disabled Checked=Checked />
    <CompoundButton Text="Primary" Primary="true" SecondaryText="This is the secondary text." OnClick=@(() => OnClickHandler("Compound Primary")) Disabled=@Disabled Checked=Checked />
</Stack>
            
            
Command Bar Button
<Stack Horizontal="true" Style=@("height:44px")>
    <CommandBarButton IconName="add"
      Text="New item"
      MenuItems="MenuProperties"
      Disabled="@Disabled"
      Checked="Checked" />
    <CommandBarButton IconName="mail" Text="Send mail" Disabled="@Disabled" Checked="Checked" />
</Stack>
            
            
Split Button Button
<Stack Horizontal="true" Wrap="true" Tokens=@(new StackTokens() { ChildrenGap = new[] { 40.0 } })>
    <DefaultButton Text="Standard"
   Split="true"
   MenuItems="MenuProperties"
   OnClick=@(() => OnClickHandler("Standart Split"))
   Disabled=@Disabled
   Checked=Checked />
    <PrimaryButton Text="Primary"
   Split="true"
   MenuItems="MenuProperties"
   OnClick=@(() => OnClickHandler("Primary Split"))
   Disabled=@Disabled
   Checked=Checked />
    <DefaultButton Text="Main action disabled"
   PrimaryDisabled="true"
   Split="true"
   MenuItems="MenuProperties"
   OnClick=@(() => OnClickHandler("Main Action Disabled Split"))
   Disabled=@Disabled
   Checked=Checked />
    <PrimaryButton Text="Disabled"
   Disabled="true"
   Split="true"
   MenuItems="MenuProperties"
   OnClick=@(() => OnClickHandler("Disabled Split"))
   Checked=Checked />
</Stack>
            
            
Icon Button
<Stack Horizontal="true" Tokens=@(new StackTokens() { ChildrenGap = new[] { 8.0 } })>
    <IconButton OnClick=@(() => OnClickHandler("Icon")) IconName="emoji" AriaLabel="Emoji" Disabled=@Disabled Checked=Checked />
    <IconButton MenuItems="MenuProperties" IconName="emoji" AriaLabel="Emoji" Disabled=@Disabled Checked=Checked />
</Stack>
            
            
Icon Button with Tooltip
<TooltipHost>
    <TooltipContent>
        Emoji
    </TooltipContent>
    <ChildContent>
        <IconButton OnClick=@(() => OnClickHandler("Icon")) IconName="emoji" AriaLabel="Emoji" Disabled=@Disabled Checked=Checked />
    </ChildContent>
</TooltipHost>
            
            
Action Button
<ActionButton IconName="person_add" Disabled=@Disabled Checked=Checked OnClick=@(() => OnClickHandler("Action"))>
    Create account
</ActionButton>
            
            
Command Button
<CommandButton IconName="add" Text="New item" MenuItems="MenuProperties" Disabled=@Disabled Checked=Checked />
            
            
Button-like Anchor
<DefaultButton Text="BlazorFluentUI GitHub" Href="https://github.com/BlazorFluentUI/BlazorFluentUI" Disabled=@Disabled Checked=Checked />
            
            
Button with Aria Description for Screen Reader
<PrimaryButton AriaDescripton="Detailed description used for screen reader." Disabled=@Disabled Checked=Checked>
    Button with Aria Description
</PrimaryButton>
            
            
Custom Split Button
<IconButton Split="true"
            IconName="add"
            SplitButtonAriaLabel="See 2 options"
            AriaRoleDescription="split button"
            MenuItems="MenuProperties"
            AriaLabel="New item"
            OnClick=@(() => OnClickHandler("Custom Split"))
            Disabled=@Disabled Checked=Checked />
            
            
Toggle Button
<DefaultButton Toggle="true"
               Checked=@(muted || Checked)
               Text=@(muted ? "Volume muted" : "Volume unmuted" )
               IconName=@(muted ? "speaker_mute" : "speaker_2")
               OnClick=Mute
               Disabled=Disabled />
            
            
Using Command & CommandParameter with Button
Command Result:
<PrimaryButton AriaDescripton="Detailed description used for screen reader." Disabled=@Disabled Checked=Checked>
    Button with Aria Description
</PrimaryButton>