Button

palette grid_view
Buttons let people take action and make choices with one tap
There are several button variants: | Component | Description | | ------------------------------ | --------------------------------------------------------------------------------------------------------------------- | | `button[md-elevated]` | [Elevated button](https://m3.material.io/components/buttons/guidelines#4e89da4d-a8fa-4e20-bb8d-b8a93eff3e3e) | | `button[md-filled]` | [Filled button](https://m3.material.io/components/buttons/guidelines#9ecffdb3-ef29-47e7-8d5d-f78b404fcafe) | | `button[md-filled-tonal]` | [Filled tonal button](https://m3.material.io/components/buttons/guidelines#07a1577b-aaf5-4824-a698-03526421058b) | | `button[md-outlined]` | [Outlined button](https://m3.material.io/components/buttons/guidelines#3742b09f-c224-43e0-a83e-541bd29d0f05) | | `button[md-text]` | [Text button](https://m3.material.io/components/buttons/guidelines#c9bcbc0b-ee05-45ad-8e80-e814ae919fbb) | | `button[md-icon]` | [Standard icon button](https://m3.material.io/components/icon-buttons/specs#eca0451e-430b-41e1-bea3-a31cb7ccda76) | | `button[md-filled-icon]` | [Filled icon button](https://m3.material.io/components/icon-buttons/specs#d4169fb5-4cf8-40b6-9ec3-4044f09cca1f) | | `button[md-filled-tonal-icon]` | [Filled tonal icon button](https://m3.material.io/components/icon-buttons/specs#c2ca424b-2ad7-40e6-8946-47fb1918060a) | | `button[md-outlined-icon]` | [Outlined icon button](https://m3.material.io/components/icon-buttons/specs#632e1356-8002-4ae1-ae36-48c1f9b17ef2) | ## Installation
## API Buttons and icon buttons support below inputs: | Input | Type | Default | Description | | -------------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------- | | `disabled` | `boolean` | `false` | Whether or not the button is disabled. | | `href` | `string` | `''` | The URL that the link button points to. | | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. | | `trailingIcon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start. | | `type` | `string` | `'submit'` | | | `value` | `string` | `''` | | | `name` | `string` | `undefined` | | | `icon` | `string` | `''` | Material symbol to render in button | Additionally, icon buttons support below inputs: | Input | Type | Default | Description | | ------------------- | --------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `selectedIcon` | `string` | `''` | Material symbol for the selected state | | `ariaLabelSelected` | `string` | `''` | The `aria-label` of the button when the button is toggleable and selected. | | `toggle` | `boolean` | `false` | When true, the button will toggle between selected and unselected states | | `selected` | `boolean` | `false` | Sets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon if no `slot="selected"` icon is provided. | | `flipIconInRtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. | ## Usage ### Link You can use `routerLink` or `href` to make it a link.
### Toggle Icon Toggle icon buttons allow a single choice to be selected or deselected, such as adding or removing something from favorites. Add a second icon in the `slot="selected"` slot to change the icon when selected. Toggle icon buttons can be pre-selected by adding the `selected` attribute.
Support Free Content Creation

Contributions & Support

Even though the courses and articles are available at no cost, your support in my endeavor to deliver top-notch educational content would be highly valued. Your decision to contribute aids me in persistently improving the course, creating additional resources, and maintaining the accessibility of these materials for all. I'm grateful for your consideration to contribute and make a meaningful difference!

Envelop
Don't miss any update

Stay up to date

Subscribe to the newsletter to stay up to date with articles, courses and much more!

Angular Material Dev

Angular Material Dev is one place stop for developers to learn about integrating Material Design in Angular applications like a pro.

Find us on X (Twitter)