Angular Button Components – Buttons and Icon Actions

Buttons let users run actions and commands such as save, create, edit, delete, open, filter, download, confirm, or cancel. Use a real button for actions and an anchor with ngsButton only when the control navigates to another URL.

Choose a variant by emphasis:

Filled: Primary action on a screen, form, dialog, or toolbar.
Outlined: Secondary action that still needs clear visibility.
Tonal: Softer secondary action or neutral command.
Text: Low-emphasis action inside dense UI or supporting controls.
Icon button: Compact action with an icon only. Always provide an accessible label.

Do not use Button for sidebar navigation, menu items, tabs, toggle groups, checkboxes, radios, selects, or plain links inside text. Use the matching navigation or form component instead.

The NgStarter Angular Button component lets you trigger actions with filled, outlined, text, tonal, loading, disabled, and icon button states. Use for commands, form submission, toolbar actions, and navigation-like calls to action. It includes examples for Basic Button, Outlined Button, Tonal Button, and Flat Button.

Basic Button

Use text buttons for low-emphasis actions or commands inside dense interfaces.

Outlined Button

Use outlined buttons for secondary actions that should stay visible without becoming primary.

Tonal Button

Use tonal buttons for softer secondary actions, neutral commands, or repeated toolbar controls.

Flat Button

Use filled buttons for the main action in a form, dialog, page header, or workflow step.

Icon Button

Use icon buttons for compact actions. Add an aria-label whenever the icon is the only visible label.

Button Loading

Use loading state while an action is running to prevent duplicate submissions and show progress.

Hide text on mobile

Use hideTextOnMobile when a button should keep its text on larger screens but become icon-only in narrow layouts.

Interactive disabled buttons

Use disabledInteractive when a disabled-looking button still needs to receive focus so a tooltip can explain why the action is unavailable.