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.
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.
<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>
<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>
<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>
<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>
<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>
<TooltipHost>
<TooltipContent>
Emoji
</TooltipContent>
<ChildContent>
<IconButton OnClick=@(() => OnClickHandler("Icon")) IconName="emoji" AriaLabel="Emoji" Disabled=@Disabled Checked=Checked />
</ChildContent>
</TooltipHost>
<ActionButton IconName="person_add" Disabled=@Disabled Checked=Checked OnClick=@(() => OnClickHandler("Action"))>
Create account
</ActionButton>
<CommandButton IconName="add" Text="New item" MenuItems="MenuProperties" Disabled=@Disabled Checked=Checked />
<DefaultButton Text="BlazorFluentUI GitHub" Href="https://github.com/BlazorFluentUI/BlazorFluentUI" Disabled=@Disabled Checked=Checked />
<PrimaryButton AriaDescripton="Detailed description used for screen reader." Disabled=@Disabled Checked=Checked>
Button with Aria Description
</PrimaryButton>
<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 />
<DefaultButton Toggle="true"
Checked=@(muted || Checked)
Text=@(muted ? "Volume muted" : "Volume unmuted" )
IconName=@(muted ? "speaker_mute" : "speaker_2")
OnClick=Mute
Disabled=Disabled />
<PrimaryButton AriaDescripton="Detailed description used for screen reader." Disabled=@Disabled Checked=Checked>
Button with Aria Description
</PrimaryButton>