Button

The default form of the button, using the primary color.

Use the Variant parameter to change the visual style. Choose from Default (filled primary), Secondary (muted), Destructive (red for dangerous actions), Outline (bordered), Ghost (no background until hovered), and Link (styled as a text hyperlink).

Control the button dimensions with the Size parameter. Available sizes are Small, Default, and Large.

Icon-only buttons have dedicated square size variants: IconSmall, Icon, and IconLarge. These maintain equal width and height for icon content.

Add icons alongside text by including an icon component as a child element. Use margin utilities like mr-2 to space the icon from the label text.

For cleaner syntax, use the Icon render fragment with IconPosition to automatically place icons at the Start or End of the button text with correct spacing.

For icon-only buttons, use one of the Icon size variants. Always provide an AriaLabel so screen readers can announce the button's purpose.

Set Disabled to prevent user interaction. Disabled buttons have reduced opacity and do not fire the OnClick event.

Use the Loading parameter to disable the button and show a spinner automatically. Optionally provide LoadingText to replace the button label while loading, or LoadingTemplate for a fully custom loading indicator.

Set the Href parameter and the button will render as an <a> anchor element for navigation. Use Target="_blank" to open external links in a new tab.

Use the Class parameter to apply custom Tailwind CSS classes for project-specific styles such as gradients, custom colors, or different border radii.

Apply Class="w-full" to make buttons stretch to the full width of their container. Useful for mobile layouts, form submit buttons, and stacked action lists.

Set Type to ButtonType.Submit to trigger form validation and submission, or ButtonType.Reset to clear all form fields back to their initial values. The default type is ButtonType.Button, which does not interact with forms.

A common real-world pattern: use the Loading parameter to disable the button and show a spinner while an async operation runs, then re-enable when complete. Provide LoadingText to display context-specific text during the operation.

For destructive actions, use a two-step confirmation pattern. The initial button reveals a confirm/cancel pair, giving users a chance to abort before the action is executed. This prevents accidental data loss without requiring a modal dialog.

Buttons compose naturally with other Blazor Blueprint components. This example shows a typical form layout with buttons in a CardFooter — a primary action on the right and a cancel action on the left.

Use ButtonGroup to visually connect related buttons into a single toolbar-style group. The component automatically adjusts border radii so only the outer edges are rounded.

Use SplitButton to combine a primary action with a dropdown of alternatives. This keeps interfaces clean by grouping related actions under one control. See the Split Button component for full documentation including variants, sizes, icons, and advanced patterns.

Icon-only buttons must include AriaLabel so screen readers can announce the button's purpose. Pair with Tooltip to also show the label visually on hover. All buttons support full keyboard navigation with Tab, Enter, and Space.