Components

Glow and ping

Two ways of saying look here, available on every Veto component rather than on a chosen few.

Glow and Ping are parameters on the base class every component derives from, so they are already on the button, the text box, the card and everything else - including components written after this page. Both are off by default. A glow means something; a page where everything glows means nothing.

Breathing glow

A neon halo that fades in and out. On a component with a colour role of its own, it takes that role's colour without being asked.

razor

<VetoButton Glow="true">Primary</VetoButton>
<VetoButton Glow="true" Color="VetoColor.Danger">Danger</VetoButton>

Any colour you like

GlowColor takes any CSS colour and overrides both the role and the theme.

razor

<VetoButton Glow="true" GlowColor="#22d3ee" Variant="VetoVariant.Outlined">Cyan</VetoButton>

Ping ring

A ring expands out of the border, fades, and rests before the next one. For something that arrived while the reader was looking elsewhere.

razor

<VetoButton Ping="true">Inbox (3)</VetoButton>
<VetoIconButton Icon="@VetoIcons.Bell" Ping="true" PingColor="#f43f5e" Label="Notifications" />

Not only buttons

The same two parameters are on every component. Here they are on a text box and a card.

Your name

A card can ask for attention too.

razor

<VetoTextBox TValue="string" @bind-Value="_name" Label="Your name" Glow="true" />

<VetoCard Title="Something changed" Ping="true" PingColor="#22c55e">
    A card can ask for attention too.
</VetoCard>

What to know before using them

Both effects are drawn on a pseudo-element of the component's root, which keeps them out of the way of whatever box-shadow that component already uses for elevation and focus. The ring is drawn outside the border, so an ancestor with overflow: hidden will cut it off.

Neither effect is readable by a screen reader. A ping is a way of drawing the eye to something that is also said in words - a count, a status, a message - never the only place the news appears.

Under prefers-reduced-motion both stop moving but stay on screen, holding a steady glow and a steady ring. Removing them outright would take the message away along with the movement, which is not what that preference asks for.

Extrude - standing out of the screen

A perspective transform plus a shadow cast down and away, so the component reads as raised rather than merely shadowed. It comes further forward under the pointer, because a raised thing that does not answer the pointer reads as a picture of a raised thing. ExtrudeDepth sets how far out it stands. Reduced motion keeps the depth and drops the movement - the height is the design, the travel is the animation.

A card can come off the page too.

razor

<VetoButton Extrude="true">Raised</VetoButton>
<VetoButton Extrude="true" ExtrudeDepth="1.5rem">Further out</VetoButton>

<VetoCard Elevation="VetoElevation.Flat" Extrude="true">
    A card can come off the page too.
</VetoCard>

RootBordered - taking the border off anything

Every component answers to it, because the border colour is inherited from the root rather than written into each component's own rule. False makes the border transparent rather than removing it, so nothing shifts by a pixel and the focus and invalid states still have a colour to set. Null - the default - leaves the component's own stylesheet in charge. It is RootBordered rather than Bordered because several components already have a Bordered of their own, and Blazor matches parameters by name across the whole inheritance chain.

Default

No border

Ctrl+K Ctrl+K

razor

@* Works on anything - the border colour is inherited from the root. *@
<VetoTextBox TValue="string" @bind-Value="_name" RootBordered="false" />
<VetoButton Variant="VetoVariant.Outlined" RootBordered="false">Borderless</VetoButton>
<VetoKbd Keys="Ctrl+K" RootBordered="false" />

Parameters

Parameter	Type	Default	Description
`Glow`	`bool`	`false`	Surrounds the component with a neon glow that breathes in and out.
`GlowColor`	`string?`	`null`	Any CSS colour. Defaults to the component's colour role, then to the theme accent.
`Ping`	`bool`	`false`	Sends a ring expanding out of the border and fading, over and over.
`PingColor`	`string?`	`null`	The ring's colour. Defaults the same way the glow does.
`Extrude`	`bool`	`false`	Lifts the component off the page, as though it stood out of the screen.
`ExtrudeDepth`	`string?`	`null`	How far it stands out, as a CSS length. Defaults to 0.75rem.
`RootBordered`	`bool?`	`null`	False makes the component's border transparent. Null leaves its own stylesheet in charge.