Taiga UI 5.0 is out!

Button CORE

Examples API GitHub

On this page

See also

ButtonGroup, Link
Button is a basic component used for both icon buttons and regular buttons with optional icons on either side. It can be applied to button and a tags. When used as tuiIconButton don't forget to still put text label within the tag for accessibility.

Sizes

Simple buttons with preset size options.

Appearance

Buttons support all built-in appearances. See Appearance directive for more.
Use tuiAppearanceMode to emulate :checked / :invalid CSS state for outline appearance:

Icons

Using icons and other elements, such as an Avatar inside buttons in a variety of ways.

Loading

Buttons can show a loading indicator when performing an action. Dedicated TuiButtonLoading component helps with accessibility by keeping button focusable while preventing click events.

Options with DI

Default values for buttons can be configured using DI options.

Vertical

Use tuiButtonVertical attribute to set different layout.

Two labels

Nested elements with a little bit of CSS can make button appear to have sections.

GitHub StackBlitz