Components

Icon button

A button whose entire content is an icon. Always give it a label - it is the only thing a screen reader has to go on.

Variants and colours

Transparent by default, so it sits comfortably in a toolbar. Outlined and filled give it more presence when it is the primary action.

razor

<VetoIconButton Icon="@VetoIcons.Search" Label="Search" />
<VetoIconButton Icon="@VetoIcons.Plus" Label="Add" Variant="VetoVariant.Outlined" />
<VetoIconButton Icon="@VetoIcons.Check" Label="Confirm" Variant="VetoVariant.Filled" />
<VetoIconButton Icon="@VetoIcons.Trash" Label="Delete" Color="VetoColor.Danger" />

Sizes

Every size keeps a target of at least 2rem square, so the button stays comfortably tappable.

razor

<VetoIconButton Icon="@VetoIcons.Settings" Label="Settings" Size="VetoSize.Small" />
<VetoIconButton Icon="@VetoIcons.Settings" Label="Settings" Size="VetoSize.Large" />

As a toggle

Setting Pressed turns the button into a toggle and reports its state through aria-pressed, so assistive technology announces it as on or off.

Off

razor

<VetoIconButton Icon="@VetoIcons.Bell"
                Label="Notifications"
                Pressed="_on"
                OnClick="() => _on = !_on" />

As a link

Give it an Href and it renders an anchor instead of a button, so navigation stays real navigation - middle-click, open in new tab and the status bar all keep working.

razor

<VetoIconButton Icon="@VetoIcons.ExternalLink"
                Label="Open documentation"
                Href="/docs/usage" />

Parameters

Parameter	Type	Default	Description
`Icon`	`string?`	`null`	The icon's SVG markup, normally a VetoIcons constant.
`Label`	`string?`	`null`	Accessible name and tooltip. Always supply one.
`Size`	`VetoSize`	`Medium`	ExtraSmall, Small, Medium, Large or ExtraLarge.
`Variant`	`VetoVariant`	`Text`	Text, Outlined, Filled, Soft, Ghost or Elevated. Underlined draws as Text: an icon has no label to underline.
`Color`	`VetoColor`	`Neutral`	The colour role.
`Round`	`bool`	`false`	Renders a circle rather than a rounded square.
`Pressed`	`bool?`	`null`	Makes it a toggle and sets aria-pressed. Null for a plain button.
`Disabled`	`bool`	`false`	Disables the button.
`Href`	`string?`	`null`	Renders an anchor and navigates instead of raising OnClick.
`OnClick`	`EventCallback<MouseEventArgs>`	`—`	Raised when activated.