The Button component enables user interactions such as submitting forms, toggling states, and invoking actions. This sample demonstrates all Button features, including visual variants, semantic colors, sizes, icons, toggle functionality, disabled states, and form integration. The default Button renders without any styling classes and is suitable for simple or secondary actions.

Outline Buttons use the e-outline CSS class to display a bordered style with transparent background. This visual type is ideal for secondary actions or providing visual distinction while maintaining a clean, modern appearance. You can combine the outline style with semantic color classes like e-info, e-success, e-warning, and e-danger to communicate the intent of the action.

Text Buttons, created using the e-flat CSS class, display a minimal style with no border or background fill. These buttons are perfect for tertiary actions, navigation links, or contexts where visual subtlety is preferred. When combined with semantic color classes such as e-info, e-success, e-warning, and e-danger, text buttons provide clear intent while maintaining a lightweight, clean interface.

Round Buttons are created using the e-round CSS class to produce a circular or pill-shaped appearance. These buttons are commonly used for icon-only actions, floating action buttons, or compact UI layouts where space is limited. Round Buttons work best with icons via the IconCss property and can be styled using semantic color classes like e-info, e-success, e-warning, and e-danger to reinforce action intent.

Primary Buttons visually highlight the main action on a page. You can enable primary emphasis using the IsPrimary property or by applying the e-primary CSS class. This provides a stronger visual hierarchy for key actions and can also be combined with semantic color classes to reinforce intent.

Add visual meaning to actions using icons via the IconCss property. Position icons on the left, right, top, or bottom of the Button with IconPosition. For icon‑only Buttons, include an accessible aria-label.

Enable two-state behavior using the IsToggle property to create Buttons that switch between active and inactive states. Apply conditional styling through CssClass to visually reflect the state. Toggle Buttons also support icons using IconCss.

Manage interactivity using the Disabled property. Buttons can be permanently disabled or dynamically toggled based on application logic. Disabled Buttons visually indicate unavailable actions while preventing user interaction.

Inside an EditForm, Buttons default to type="submit" and trigger validation through Blazor’s form pipeline. You can set type="reset" to clear the form fields. This example demonstrates how Buttons integrate seamlessly with EditForm, DataAnnotationsValidator, and model binding to perform form submission and reset actions.