Tabs

Tabs organize content into separate views, allowing users to navigate between related groups of information without leaving the page.

Use this example to explore default behavior, customization points, and accessibility-friendly patterns in a real Blazor page.

Filled Style

Default

The default tab style uses filled containers to clearly distinguish the active tab. Ideal for high-density content.

MgTabStyle.Underlined

A more minimalist style that uses a bottom border to indicate the active tab. Commonly used in documentation and light-weight interfaces.

Property	Type	Default	Description
TabStyle	MgTabStyle	Filled	Visual style of the tabs (Filled or Underlined).
OnTabSelected	EventCallback<MgTabPage>	-	Triggered when a new tab is selected.

Property	Type	Default	Description
DisplayText	string	""	Label text for the tab.
IconName	string	null	Optional icon to display next to text.
BadgeText	string	null	Small badge displayed on the tab.