Skip to content
IzzyBlazor 0.1.0-alpha.17

Enter all results ↑ ↓ move Esc close

IconButton

A square button with a required label.

IzzyBlazor.IconButton in the IzzyBlazor.Core package, generated from the 0.1.0-alpha.17 assembly and its doc comments.

Properties (20)

IconIconData required

The icon.

Labelstring required

What the button does, for screen readers and the tooltip.

Hrefstring?

Renders a link to this URL instead of a button.

Submitbool = false

Submits the form it's in (or Form), when it's a button (not a link), like type="submit".

Resetbool = false

Resets the form it's in, when it's a button, like type="reset". Can't be combined with Submit.

Namestring?Added in 0.1.0-alpha.13

Posted with the form as Name=Value when this button submits it, so one handler can tell which button was pressed, such as which row's Delete. Not action, method or target: a control with one of those names hides the form's own property, and Blazor's enhanced form handling then posts to the wrong address.

Valuestring?Added in 0.1.0-alpha.13

The value posted with Name.

FormActionstring?Added in 0.1.0-alpha.13

Submits to this URL instead of the form's own action (native formaction).

Formstring?Added in 0.1.0-alpha.13

The id of a form elsewhere on the page that this button submits (native form).

AccentAccent = Accent.Primary

Primary (the default) for the main action, Neutral for everything else, Danger for destructive actions, or a custom color (Accent.Of("#0d9488"), Accent.Token("brand")); text on a custom color is chosen for contrast. Emphasis comes from Variant.

VariantButtonVariant = ButtonVariant.Solid

Visual weight. Defaults to ButtonVariant.Solid.

SizeControlSize = ControlSize.Md

Height. Defaults to ControlSize.Md.

StartIconIconData?

An icon before the text.

EndIconIconData?

An icon after the text.

FullWidthbool = false

Stretches to the full width of its container.

Loadingbool = false

Shows a spinner in place of the start icon and blocks further clicks.

LoadingLabelstring? = "Loading"

Read to screen readers while Loading. Defaults to "Loading".

Disabledbool = false

Disables the button.

@bind-Pressedbool?Added in 0.1.0-alpha.14 @bind: Interactive only

Makes it a toggle button, such as Bold in an editor: true shows it pressed, false not, and screen readers hear which (aria-pressed). With @bind-Pressed a click turns it on and off on interactive pages; on static pages the server decides, as with a submit button's Name and Value. Null (the default) is an ordinary button. Not for links.

ChildContentRenderFragment?

The label.

Events (1)

OnClickEventCallback<MouseEventArgs>Interactive only

Runs on click on interactive pages (a link still navigates).

Types (3)

Accent

class

The color of a control: buttons, badges, tags, banners, progress bars and menu items. Primary, Neutral and Danger are the roles; emphasis comes from the variant (solid, soft, outline, ghost, link), not from more colors. For one control in another color, use Of (any CSS color) or Token (a theme token); text on it is chosen for contrast.

Accent members
MemberDescription
Primary

The brand color, for the main action.

Neutral

A quiet, gray action.

Danger

A destructive action, such as Delete.

Of(string css)

Any CSS color, such as "#0d9488". Text on it is black or white, whichever reads better.

Token(string name)

A theme token, such as "brand" for --ib-color-brand; text on it uses --ib-color-on-brand when the theme defines it.

From(Color color)

A Color as an accent, such as Color.Success.

ButtonVariant

enum

A button's visual weight, from strongest to quietest.

ButtonVariant values
ValueDescription
Solid

Filled with the accent color. For the main action.

Soft

A light tint of the accent color.

Outline

An accent-colored border on a transparent background.

Ghost

Transparent until hovered. For toolbars and dense layouts.

Link

Looks like a link.

ControlSize

enum

The height of interactive controls. Shared by buttons and form fields, so a button and an input of the same size line up in a row.

ControlSize values
ValueDescription
Sm

32px tall, small text.

Md

36px tall (the default).

Lg

44px tall, large text. For touch-first and marketing pages.