IconButton: Blazor icon button component

Examples

Basic

Pass any Icons.Material ligature; Title adds a native tooltip and aria-label names it for screen readers.

website/Examples/Actions/IconButtonBasicExample.razor Source

Colors

Color tints the glyph with the theme's semantic colours while the button stays ghost.

website/Examples/Actions/IconButtonColorsExample.razor Source

Sizes

Small, Medium (default) and Large map to btn-sm and btn-lg.

website/Examples/Actions/IconButtonSizesExample.razor Source

Toggle, disabled and link

Drive Color from state for a toggle, Disabled blocks clicks, and Href renders an anchor.

Tap the heart

website/Examples/Actions/IconButtonStatesExample.razor Source

Playground

Icon

Color Color

Size Size

Disabled

Title

<IconButton
            Icon="favorite"
            Color="Color.Error"
            Size="Size.Large"
            Title="Add to favourites" />

API

<IconButton>

DaisyBlazor

Parameters

Color Color
= Color.Inherit
Icon colour. The default, Inherit, follows the surrounding text colour.
Disabled bool
= false
Disables the button. A link loses its href, leaves the tab order and gets aria-disabled.
Edge Edge
= Edge.False
Pulls the button outward with a negative margin so the icon lines up with the container edge.
Href string
= null
When set, renders an <a> to this URL instead of a <button>.
Icon string
= null
Material Symbols ligature for the rendered icon.
Size Size
= Size.Medium
Button size, mapped to btn-sm / btn-lg (Medium is the daisyUI default).
StopPropagation bool
= false
Stops the click from bubbling to parent elements (button mode only).
Target string
= null
Link target (for example _blank), used with Href.
Title string
= null
Native tooltip (title attribute). Icon-only buttons should also get an aria-label.
Class string
= null
Extra CSS classes merged onto the button or link.
Style string
= null
Inline CSS styles applied to the button or link.

Name	Type	Default	Description
Color	Color	Color.Inherit	Icon colour. The default, Inherit, follows the surrounding text colour.
Disabled	bool	false	Disables the button. A link loses its href, leaves the tab order and gets aria-disabled.
Edge	Edge	Edge.False	Pulls the button outward with a negative margin so the icon lines up with the container edge.
Href	string	null	When set, renders an <a> to this URL instead of a <button>.
Icon	string	null	Material Symbols ligature for the rendered icon.
Size	Size	Size.Medium	Button size, mapped to btn-sm / btn-lg (Medium is the daisyUI default).
StopPropagation	bool	false	Stops the click from bubbling to parent elements (button mode only).
Target	string	null	Link target (for example _blank), used with Href.
Title	string	null	Native tooltip (title attribute). Icon-only buttons should also get an aria-label.
Class	string	null	Extra CSS classes merged onto the button or link.
Style	string	null	Inline CSS styles applied to the button or link.

Events

OnClick EventCallback<MouseEventArgs>
Click callback (button mode). Not raised while Disabled.

Name	Type	Description
OnClick	EventCallback<MouseEventArgs>	Click callback (button mode). Not raised while Disabled.

From MudIconButton

IconButton keeps MudIconButton's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.