Button

Button

Displays a button or a component that looks like a button.

Variants

All six button variants matching shadcn/ui design system.

Sizes

Six size options including icon-only variants.

Buttons with Icons

Buttons with icons at start or end position (RTL-aware).

Icon at Start

Icon at End

RTL (Right-to-Left) Support

Icon positioning automatically flips in RTL layouts.

In RTL mode, IconPosition.Start icons appear on the right and IconPosition.End icons appear on the left.

Disabled State

Buttons with reduced opacity and no pointer events.

Interactive

Click handlers and event callbacks.

Button Types

Different HTML button type attributes (submit, reset, button).

LinkButton (Semantic Links)

Use LinkButton for navigation — renders as an <a> tag styled as a button for better semantics and SEO.

All Variants

Home (Default) Home (Outline) Home (Secondary) Home (Ghost) Home (Link)

With Icons

Back to Components NeoUI Website

External Links

Blazor Docs Tailwind CSS

Tip: Use Target="_blank" to open links in a new tab

Button vs LinkButton

Choose the right component for better semantics and accessibility.

✓ Use Button

Form submissions
Opening modals/dialogs
Triggering state changes
Any action that doesn't navigate

✓ Use LinkButton

Navigation to pages
External links
SEO-important links
Any action that changes URL

View Architecture

Custom Classes

Buttons with additional CSS classes via the Class parameter.

Accessibility

Keyboard navigation and screen reader support: Tab focuses buttons in sequence; Enter and Space activate focused buttons; disabled buttons are excluded from tab order; AriaLabel supports icon-only buttons; focus ring appears on keyboard focus; color contrast meets WCAG 2.1 AA.

Dark Mode

Toggle dark mode above to test all variants in dark theme.

Browser Compatibility

Tested and verified across modern browsers.

✓ Chrome 120+ (tested)

✓ Firefox 120+ (tested)

✓ Edge 120+ (tested)

✓ Safari 17+ (compatible)

API Reference

Component parameters and their types.

Prop	Type	Default	Description
Variant	ButtonVariant	Default	Visual style: Default, Destructive, Outline, Secondary, Ghost, Link.
Size	ButtonSize	Default	Size: Small, Default, Large, Icon, IconSmall, IconLarge.
Type	ButtonType	Button	HTML button type: Button, Submit, Reset.
Disabled	bool	false	Whether the button is non-interactive.
IconPosition	IconPosition?	—	Where to place the icon: Start or End.
AriaLabel	string?	—	Accessible label for icon-only buttons.
Class	string?	—	Additional CSS classes.
OnClick	EventCallback	—	Click event callback.

Previous Breadcrumb Next Button Group