Button

The kit's text button, button[nol-button], applied to a native button, which keeps its own type, disabled and events. Its content is the label, which ends with an ellipsis when the button is too narrow for it; an element marked nolButtonIcon is placed before the label as its icon.

Applied to a native link, a[nol-button], it gives the link the same look, without an underline, while the link keeps its own href, target and events. A link has no disabled state; leave out a link to somewhere unavailable rather than showing it dimmed.

Examples

Loading…

States

Loading…

API

Selector button[nol-button], a[nol-button]

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`variant`	`ButtonVariant`	`ButtonVariant.Primary`	The button's look, primary for the main action of its place, secondary for the others, and text for a quiet one; primary when not bound.
`overlay`	`boolean`	`false`	Whether a text button takes the overlay look, for a labeled action over an image or a dark backdrop, such as an image viewer's zoom percentage: a pill in the theme's `overlay` fill with its label in `overlay-text`, the same in light and dark, with the toolbar hover over the fill. Another variant keeps its own look; false when not bound.
`backdrop`	`boolean`	`false`	Whether an overlay text button sits on the overlay backdrop itself, such as an image viewer's, where the `overlay` fill would vanish: its pill takes the theme's `overlay-control` look, white at 10%, with its `overlay-control-hover` look, white at 8%, over it under the pointer, and its label the `overlay-control-text` look, #EEEEEE; disabled, it is at 35% opacity. Forced colors keep the overlay look. Ignored without `overlay`; false when not bound.
`danger`	`boolean`	`false`	Whether a primary button's action destroys something, such as a confirm dialog's Delete: its fill takes the theme's `error` color under its label in `button-danger-text`, and its hover mixes 10% of the label's color into that fill, with the primary button's size, focus and disabled looks; under forced colors it is the plain button's. Another variant keeps its own look; false when not bound.
`size`	`ButtonSize`	`ButtonSize.Normal`	The button's height, normal or compact, with any variant; normal when not bound.
`busy`	`boolean`	`false`	Whether the button's work is under way: the kit's spinner, in the button's text color, stands centered in place of its icon and label, which stay in the layout unseen and still name it, so the button keeps its width and height exactly; under forced colors the spinner keeps its own look, a `Highlight` arc on a `Canvas` track. It is marked `aria-busy`, and ignores clicks, middle clicks, Enter and Space, so neither its own handlers nor its parents hear them and a link doesn't follow its `href`. False when not bound.

Accessibility

Key	Action
`Tab`	Moves the focus to the button, or past it; a disabled button is skipped, and a busy one keeps its place.
`Enter`	Presses a button, or follows a link shown as a button; a busy one ignores it.
`Space`	Presses a button; a busy one ignores it.

The kit styles the native element, so a button keeps the button role and a link the link role, with their own type, disabled state, href and events.

The label is the accessible name; an icon marked nolButtonIcon is hidden from assistive technology with aria-hidden.

A busy button is marked aria-busy, and its hidden label still names it while the spinner shows.

A button that stays focusable while unavailable takes aria-disabled and looks disabled; a link has no disabled state, so leave out a link to somewhere unavailable.

Specification

Loading…