Buttons - Fod.DemoPage

Styles and States

FOD Design System defines five button colors with multiple states: default, hover, active, loading, and disabled.

defaultprimary

loadingprimary

disabledprimary

defaultsecondary

loadingsecondary

disabledsecondary

defaultstrict

loadingstrict

disabledstrict

defaultneutral

loadingneutral

disabledneutral

defaultdestructive

loadingdestructive

disableddestructive

razor

ButtonVariant.Filled">Primary</FodButton>
                                      <FodButton Type="FodColor.Secondary" Variant="ButtonVariant.Filled">Secondary</FodButton>
                                      <FodButton Type="FodColor.Strict" Variant="ButtonVariant.Filled">Strict</FodButton>
                                      <FodButton Type="FodColor.Neutral" Variant="ButtonVariant.Filled">Neutral</FodButton>
                                      <FodButton Type="FodColor.Destructive" Variant="ButtonVariant.Filled">Destructive</FodButton>

Button Sizes

Buttons come in three sizes: Large, Medium (default), and Small.

Large

Medium (Default)

Small

razor

ButtonVariant.Filled" Size="Size.Large">Large</FodButton>
                                      <FodButton Type="FodColor.Primary" Variant="ButtonVariant.Filled" Size="Size.Medium">Medium</FodButton>
                                      <FodButton Type="FodColor.Primary" Variant="ButtonVariant.Filled" Size="Size.Small">Small</FodButton>

Button Shapes

Buttons can be rectangular (default) or circular (pill-shaped).

Rectangular (Default)

Circular (Pill)

razor

ButtonVariant.Filled" Shape="ButtonShape.Rectangular">Rectangular</FodButton>
                                       <FodButton Type="FodColor.Primary" Variant="ButtonVariant.Filled" Shape="ButtonShape.Circular">Circular</FodButton>

Variations

Buttons support four content modes: text-only, with leading icon, with trailing icon, and icon-only.

Leading Icon

Trailing Icon

Dropdown action

External action

razor

<!-- Leading icon: + Add -->
<FodButton Type="FodColor.Primary">
    <IconStart><FodIcon Icon="IconName.PlusLarge"/></IconStart>
    <ChildContent>Add</ChildContent>
</FodButton>

<!-- Trailing icon (text variant): Next > -->
<FodButton Type="FodColor.Primary" Variant="ButtonVariant.Text">
    <ChildContent>Next</ChildContent>
    <IconEnd><FodIcon Icon="IconName.ChevronRight"/></IconEnd>
</FodButton>

<!-- Trailing icon: Save as v -->
<FodButton Type="FodColor.Primary">
    <ChildContent>Save as</ChildContent>
    <IconEnd><FodIcon Icon="IconName.ChevronBottom"/></IconEnd>
</FodButton>

<!-- External action: Solicita online -->
<FodButton Type="FodColor.Primary">
    <ChildContent>Solicita online</ChildContent>
    <IconEnd><FodIcon Icon="IconName.ExternalLink"/></IconEnd>
</FodButton>

Auto-Loading Async Buttons

Buttons can automatically show a loading state during async operations using AutoLoading.

Click to simulate async operation

razor

<FodButton Type="FodColor.Primary" Variant="ButtonVariant.Filled" OnClickAsync="SaveAsync" AutoLoading="true">Save Data</FodButton>

Link Buttons

Buttons can render as anchor tags when Href is provided, supporting navigation.

Internal Link

Home Page

External Link

FOD Design System

razor

ButtonVariant.Filled">Home Page</FodButton>
                                      <FodButton Href="https://github.com/egov-moldova/design-system" Target="_blank"
                                                 Type="FodColor.Primary" Variant="ButtonVariant.Text">
                                          <ChildContent>FOD Design System</ChildContent>
                                          <IconEnd><FodIcon Icon="IconName.ExternalLink"/></IconEnd>
                                      </FodButton>

Width Behavior

Buttons shrink to fit their content by default. Use FullWidth to expand a button to fill its container. The demo matrix applies a min-width of 84px for visual consistency only.

Auto width (default)

Full width

razor

ButtonVariant.Filled">Button</FodButton>
                                      <FodButton Type="FodColor.Primary" Variant="ButtonVariant.Filled" FullWidth="true">Full Width Primary</FodButton>

Interactive Example

Click buttons to see interactive behavior.

Click Counter: 0

Toggle State: Inactive

razor

<FodButton Type="FodColor.Primary" Variant="ButtonVariant.Filled" OnClick="HandleClick">Click Me</FodButton>

API Reference

FodButton component properties and their descriptions.

No properties defined.

Icon Button: Quick Start

Icon buttons are compact action triggers. Every icon button requires an AriaLabel for accessibility since there's no visible text label.

Edit

Delete

Add new

razor

<FodIconButton AriaLabel="Edit">
    <Icon>
        <FodIcon Icon="IconName.Edit"/>
    </Icon>
</FodIconButton>

<FodIconButton AriaLabel="Delete">
    <Icon>
        <FodIcon Icon="IconName.Delete"/>
    </Icon>
</FodIconButton>

Icon Button: Variants

Icon buttons support four visual variants: Standard (transparent with hover), Filled (solid background), Outlined (border), and Text (minimal).

Standard

Filled

Outlined

Text

razor

<FodIconButton AriaLabel="Edit" Variant="IconButtonVariant.Standard">
    <Icon><FodIcon Icon="IconName.Edit"/></Icon>
</FodIconButton>

<FodIconButton AriaLabel="Edit" Variant="IconButtonVariant.Filled">
    <Icon><FodIcon Icon="IconName.Edit"/></Icon>
</FodIconButton>

<FodIconButton AriaLabel="Edit" Variant="IconButtonVariant.Outlined">
    <Icon><FodIcon Icon="IconName.Edit"/></Icon>
</FodIconButton>

<FodIconButton AriaLabel="Edit" Variant="IconButtonVariant.Text">
    <Icon><FodIcon Icon="IconName.Edit"/></Icon>
</FodIconButton>

Icon Button: Colors

Five semantic colors are available for Filled and Outlined variants. Standard and Text variants use the current text color.

Filled Variant

Primary

Secondary

Strict

Neutral

Destructive

Outlined Variant

Primary

Secondary

Strict

Neutral

Destructive

razor

<FodIconButton AriaLabel="Add" Variant="IconButtonVariant.Filled" Color="FodColor.Primary">
    <Icon><FodIcon Icon="IconName.PlusLarge"/></Icon>
</FodIconButton>

<FodIconButton AriaLabel="Edit" Variant="IconButtonVariant.Outlined" Color="FodColor.Neutral">
    <Icon><FodIcon Icon="IconName.Edit"/></Icon>
</FodIconButton>

Icon Button: Sizes

Three sizes are available: Small (32px), Medium (40px - default), and Large (48px). All sizes maintain a minimum 44x44px touch target for accessibility on mobile devices.

Small

Medium (Default)

Large

razor

<FodIconButton AriaLabel="Small" Size="Size.Small">
    <Icon><FodIcon Icon="IconName.Notification"/></Icon>
</FodIconButton>

<FodIconButton AriaLabel="Medium" Size="Size.Medium">
    <Icon><FodIcon Icon="IconName.Notification"/></Icon>
</FodIconButton>

<FodIconButton AriaLabel="Large" Size="Size.Large">
    <Icon><FodIcon Icon="IconName.Notification"/></Icon>
</FodIconButton>

Icon Button: States

Icon buttons support disabled and loading states. Disabled buttons are visually dimmed and non-interactive. Loading buttons show a spinner and prevent interaction.

Default

Loading

Disabled

razor

<FodIconButton AriaLabel="Share" Variant="IconButtonVariant.Filled" IsLoading="true">
    <Icon><FodIcon Icon="IconName.ShareAndroid"/></Icon>
</FodIconButton>

<FodIconButton AriaLabel="Share" Variant="IconButtonVariant.Filled" Disabled="true">
    <Icon><FodIcon Icon="IconName.ShareAndroid"/></Icon>
</FodIconButton>

Icon Button: Toggle Mode

Icon buttons can act as toggles to represent on/off states. Use Toggle=true and bind to the Pressed property. The button will show visual feedback and set aria-pressed for screen readers.

Notifications disabled

Not favorited

razor

@code {
    private bool _isBookmarked;
}

<FodIconButton AriaLabel="@(_isBookmarked ? "Remove from favorites" : "Add to favorites")"
               Toggle="true"
               @bind-Pressed="_isBookmarked"
               Variant="IconButtonVariant.Filled"
               Color="FodColor.Primary">
    <Icon><FodIcon Icon="IconName.Bookmark"/></Icon>
</FodIconButton>

Icon Button: Click Events

Icon buttons can respond to click events for triggering actions. Use OnClick for synchronous handlers or OnClickAsync with AutoLoading=true for async operations with automatic loading state.

Added 0 items

Async operation with auto-loading

razor

@code {
    private int _clickCount;

    private void IncrementCounter()
    {
        _clickCount++;
    }

    private async Task SimulateAsyncOperation()
    {
        await Task.Delay(2000); // Simulates 2-second operation
    }
}

<FodIconButton AriaLabel="Add item" OnClick="IncrementCounter">
    <Icon><FodIcon Icon="IconName.PlusLarge"/></Icon>
</FodIconButton>

<FodIconButton AriaLabel="Download"
               OnClickAsync="SimulateAsyncOperation"
               AutoLoading="true">
    <Icon><FodIcon Icon="IconName.Download"/></Icon>
</FodIconButton>

Icon Button: Accessibility

Icon buttons are fully accessible when used correctly. Follow these guidelines for optimal accessibility.

Required: AriaLabel

Since icon buttons have no visible text, the AriaLabel parameter is required. This provides the button's name to screen readers.

razor

@* Good: Has aria-label *@
<FodIconButton AriaLabel="Delete item">
    <Icon><FodIcon Icon="IconName.Delete"/></Icon>
</FodIconButton>

@* Bad: Missing AriaLabel will throw runtime exception *@
<FodIconButton>
    <Icon><FodIcon Icon="IconName.Delete"/></Icon>
</FodIconButton>

Keyboard Navigation

Icon buttons are keyboard accessible:

Tab - Focus the button
Enter or Space - Activate the button
Visible focus ring appears on keyboard focus

ARIA Attributes

Icon buttons automatically set appropriate ARIA attributes:

aria-label - Required, provides accessible name
aria-pressed - Set when Toggle=true, indicates on/off state
aria-disabled - Set when Disabled=true
aria-busy - Set when IsLoading=true
aria-hidden="true" - Applied to icon content (decorative)

API Reference

Complete list of properties available for FodIconButton component.

No properties defined.