Button Component

The Angular Button component lets you enable clickable elements that trigger actions in your Angular app. You get full control over button variants, styling, and sizes. The Button component also lets you handle clicks, toggle the button, and disable it when needed.

Live Demo

Anatomy

The Angular Button renders its label and optional prefix and suffix content in the component shadow DOM.

The Button renders its content inside the base CSS part. Use the default slot for the label and the prefix and suffix slots for optional content before and after the label.

<igc-button>
├── ::part(base)
├── prefix slot
├── default slot content
└── suffix slot
</igc-button>

Getting Started

To use the Angular Button, follow the Ignite UI for Angular Getting Started topic for the basic project setup, then register the component for your target platform.

For Angular using the igniteui-angular package, install the package:

npm install igniteui-angular

Then import IgxButtonDirective and add it to the component imports collection.

import { Component } from '@angular/core';
import { IgxButtonDirective } from 'igniteui-angular/directives';

@Component({
    selector: 'app-button',
    imports: [IgxButtonDirective],
    template: '<button igxButton>Save changes</button>'
})
export class ButtonComponent {}

The simplest way to start using the IgxButton is as follows:

<button igxButton></button>

Usage

Use the Angular Button to trigger an action, submit form data, or navigate to another page. Choose the appropriate button type and variant for the action, then add optional content such as icons when needed.

The Button content is placed in its default slot. Add the action label as the button content so that the purpose of the action is clear to all users.

<button igxButton>Save changes</button>

With prefix and suffix slots of the IgxButton component, we can add different content before and after the main content of the button.

We recommend using a <span> element when adding simple text, symbols, or emojis, and an Icon component when adding icons to the prefix and suffix slots.

<button igxButton="contained">
    <span igxButtonIcon="prefix">download</span>
    Download
    <span igxButtonIcon="suffix">arrow_forward</span>
</button>

Type

The button component will change its internal structure from a <button> to an <a> type element when the Href attribute is set. In that case the button can be thought of as a regular link. Setting the Href attribute will allow you to also set the Rel, Target and Download attributes. In the case when the button component uses an actual <button> element internally, we can specify its DisplayType by setting the property to any of the following values:

• Submit - when we want to submit the form data
• reset - when we want to reset form data to its initial values
• button - when we want to add button with a custom functionality anywhere on a webpage

Variants

Five types of Buttons are supported: contained button for prominent primary actions, outlined button for secondary actions, flat button for subtle actions, floating action button (Fab) for prominent main actions, and icon button for actions represented by an icon. Icon Buttons can also use any of the other four variants.

Contained Button

Use the Variant attribute to add a simple contained button in your component template. Note that if you do not set variant, by default it will be set to contained.

Outlined Button

All you have to do to create an outlined button is to change the value of the Variant property:

Flat Button

Analogically, we can switch to flat variant.

Floating Action Button

We can create a floating action button by setting the Variant property to fab:

States

You may also insert each Button in a disabled state because they all support both Enabled and Disabled variants. In Figma, you can switch between the two using a boolean property in the properties panel. In code, use the disabled property or attribute when an action is not currently available.

<button igxButton="contained" [disabled]="true">Disabled</button>

Interaction States

In Figma the Enabled buttons support Idle, Hover, Focused and Focused & Hover states which can be switched between by changing the State property. In code, these interaction states are provided by the platform Button component and should preserve a visible focus indicator for keyboard users.

<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
    Ripple
</button>

Layout Template

Contained, Outlined, Flat, and Floating Action Buttons support flexible icon and label templates. In Figma, to show or hide the icons, you can use the Left Icon and Right Icon boolean properties. If you want to have an Icon Button, you can set the Content property to Icon.

<span igxButton="outlined" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
    Span button
</span>

Size

Users can change the size of the IgxButton using the --ig-size CSS variable.

.button-size-small {
    --ig-size: var(--ig-size-small);
}

The result of implementing the above code should look like the following:

Download

Setting the Download Button attribute will prompt the user to save the linked URL instead of navigating to it.

<button
    igxButton="contained"
    href=""
    download="url"
    target="_blank">
    Download
</button>

Do/Don’t

When to use: Use Button for actions that change state, submit data, or trigger an application command.

When not to use: Use Icon Button when the action is represented only by an icon and does not require a text label.

Do	Don’t

Properties

The Angular Button exposes platform-specific properties for controlling its content, appearance, and behavior.

The Angular Button is provided as a directive and exposes the following properties. Use the API reference for the complete type definitions.

Styling

Customize the Button with theme settings, CSS variables, or CSS parts to match the visual language of your application.

Sass Theming

Use the standard Ignite UI for Angular theme workflow to customize the Button consistently with the rest of the application.

CSS Variables

Use the generated CSS variables on the Button element to override the theme values for a specific instance. The variant-specific theme functions derive related interaction-state values from the primary theme parameters.

Style Parts

The IgxButton exposes three CSS parts which we can use for styling:

The base CSS part allows us to style the wrapped element (<button> or <a>).

igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}

Styling with Tailwind

You can style the Button using custom Tailwind utility classes. Make sure to set up Tailwind first.

Along with the Tailwind import in your global stylesheet, include the utility file:

@import "tailwindcss";
@use 'igniteui-theming/tailwind/utilities/material.css';

Use the variant-specific classes such as light-flat-button, light-contained-button, light-outlined-button, and light-fab-button:

<button igxButton="contained" class="!light-contained-button ![--background:#7B9E89]">
    Contained Button
</button>

The exclamation mark (!) ensures that the utility class takes precedence over the Button’s default theme.

Accessibility

The Angular Button is an interactive control for actions and, when href is set, navigation. Use the native button behavior for commands and preserve the link behavior for navigation.

Keyboard Interaction

The Button uses the keyboard behavior of its rendered native control. A disabled Button is not interactive, and a Button with href is rendered as a link instead of a command button.

Screen Readers / ARIA

The Button renders a native button for command actions and an a element when href is set. The native element supplies the appropriate role and keyboard semantics.

• The Button uses the native button or a element, so assistive technology receives the corresponding native role and keyboard semantics.
• Provide an aria-label or another accessible naming mechanism for an icon-only Button.
• A disabled Button is not keyboard interactive.
• Click event handlers perform application actions; add an accessible name and state separately when the action is not conveyed by the visible content or native attributes.

Accessibility Compliance

This topic does not make a product-level WCAG, Section 508, or EN 301 549 conformance claim. Verify the rendered Button and its surrounding application against the accessibility requirements that apply to the target project.

Your responsibilities:

• Give every Button a meaningful accessible name, especially icon-only Buttons.
• Use a command Button for actions and href for navigation; do not emulate one with the other.
• Do not rely on color, hover, or focus styling alone to communicate the action or state.
• Preserve sufficient contrast and a visible focus indicator when customizing the Button theme.

Troubleshooting

Use this section to check boundaries and common decisions before treating Button as a command, navigation link, or form control.

Why does the Button behave like a link?

When href is set, the Button is used for navigation rather than for a command action. Remove href when the control should trigger application logic instead of navigating to a URL.

Why is the Button not keyboard-focusable?

Check whether the Button is disabled or whether the surrounding application changes its focus behavior. Use a focusable Button for actions that must be available through keyboard navigation.

Known Limitations

The Button has the following platform-independent boundaries:

• Use a text label or another accessible naming mechanism for every action; an unlabeled icon-only Button does not communicate its purpose by itself.
• Setting href changes the Button from an action control to a navigation control. Use Icon Button for icon-only actions and verify its accessible name separately.
• The Button’s visual appearance does not determine whether the surrounding application action is available or valid; application logic must provide that state and feedback.

API References

Dependencies

The Angular Button requires the corresponding Angular package and theme stylesheet. The sizing example also uses the Radio and IgxRadioGroup components.

Additional Resources

The following resources provide additional Angular Button guidance and project support.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub

Related Components

The Angular Button is commonly used with related components when an action needs a specialized presentation.

• Icon Button is intended for icon-only actions.

FAQ