# Buttons [Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.  **Contents** * [Design & API Documentation](#design-api-documentation) * [Using buttons](#using-buttons) * [Elevated button](#elevated-button) * [Filled button](#filled-button) * [Filled tonal button](#filled-tonal-button) * [Outlined button](#outlined-button) * [Text button](#text-button) * [Toggle button](#toggle-button) * [Icon button](#icon-button) * [Theming](#theming-buttons) ## Design & API Documentation * [Google Material3 Spec](https://material.io/components/buttons/overview) * [API Reference](https://developer.android.com/reference/com/google/android/material/button/package-summary) ## Using buttons Before you can use Material buttons, you need to add a dependency to the Material Components for Android library. For more information, go to the [Getting started](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md) page. **Note:** `` is auto-inflated as `` via `MaterialComponentsViewInflater` when using a `Theme.Material3.*` theme. ### Making buttons accessible Buttons support content labeling for accessibility and are readable by most screen readers, such as TalkBack. Text rendered in buttons is automatically provided to accessibility services. Additional content labels are usually unnecessary. For more information on content labels, go to the [Android accessibility help guide](https://support.google.com/accessibility/android/answer/7158690). ### Types There are five types of common buttons: 1\. [Elevated button](#elevated-button), 2\. [Filled button](#filled-button), 3\. [Filled tonal button](#filled-tonal-button), 4\. [Outlined button](#outlined-button), 5\. [Text button](#text-button). [Toggle button](#toggle-button) is an additional pattern using a segmented container or icon.  ## Elevated button [Elevated buttons](https://material.io/components/buttons/#elevated-button) are essentially outlined buttons with a shadow. To prevent shadow creep, only use them when absolutely necessary, such as when the button requires visual separation from a patterned background. ### Elevated button examples API and source code: * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) The following example shows an elevated button with a text label.  In the layout: ```xml ``` In code: ```kt elevatedButton.setOnClickListener { // Respond to button press } ``` #### Adding an icon to an elevated button The following example shows an elevated button with an icon.  In the layout: ```xml ``` ### Anatomy and key properties An elevated button has a text label, a stroked container and an optional icon.  1. Container 2. Label text 3. Icon #### Text label attributes Element | Attribute | Related method(s) | Default value -------------- | ------------------------ | --------------------------------- | ------------- **Text label** | `android:text` | `setText`
`getText` | `null` **Color** | `android:textColor` | `setTextColor`
`getTextColor` | `?attr/colorOnSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_foreground_color_selector.xml)) **Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceLabelLarge` #### Container attributes Element | Attribute | Related method(s) | Default value ---------------- | --------------------- | ---------------------------------------------------------------------------- | ------------- **Color** | `app:backgroundTint` | `setBackgroundColor`
`setBackgroundTintList`
`getBackgroundTintList` | `?attr/colorSurfaceContainerLow` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_background_color_selector.xml)) **Stroke color** | `app:strokeColor` | `setStrokeColor`
`setStrokeColorResource`
`getStrokeColor` | `null` **Stroke width** | `app:strokeWidth` | `setStrokeWidth`
`setStrokeWidthResource`
`getStrokeWidth` | `0dp` **Shape** | `app:shapeAppearance` | `setShapeAppearanceModel`
`getShapeAppearanceModel` | `?attr/shapeAppearanceSmallComponent` **Elevation** | `app:elevation` | `setElevation`
`getElevation` | `1dp` **Ripple color** | `app:rippleColor` | `setRippleColor`
`setRippleColorResource`
`getRippleColor` | `?attr/colorOnSurface` at 16% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_ripple_color_selector.xml)) #### Icon attributes Element | Attribute | Related method(s) | Default value ----------------------------------------------- | ----------------- | --------------------------------------------------------- | ------------- **Icon** | `app:icon` | `setIcon`
`setIconResource`
`getIcon` | `null` **Color** | `app:iconTint` | `setIconTint`
`setIconTintResource`
`getIconTint` | `?attr/colorOnSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_foreground_color_selector.xml)) **Size** | `app:iconSize` | `setIconSize`
`getIconSize` | `wrap_content` **Gravity** (position relative to text label) | `app:iconGravity` | `setIconGravity`
`getIconGravity` | `start` **Padding** (space between icon and text label) | `app:iconPadding` | `setIconPadding`
`getIconPadding` | `8dp` #### Styles Element | Style ----------------- | --------------------------------------------- **Default style** | `Widget.Material3.Button.ElevatedButton` **Icon style** | `Widget.Material3.Button.ElevatedButton.Icon` See the full list of [styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/styles.xml) and [attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml). ## Filled button [Filled button's](https://material.io/components/buttons/#filled-button) contrasting surface color makes it the most prominent button after the FAB. It’s used for final or unblocking actions in a flow. **Note** The filled button is the default style if the style is not set. ### Filled button examples API and source code: * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) The following example shows a filled button with a text label and a filled container.  In the layout: ```xml ``` **Note:** Since this is the default type, you don't need to specify a style tag as long as you are using a Material Components Theme. If not, set the style to `@style/Widget.Material3.Button`. In code: ```kt filledButton.setOnClickListener { // Respond to button press } ``` #### Adding an icon to a filled button The following example shows a filled button with an icon.  In the layout: ```xml ``` ### Anatomy and key properties A filled button has a text label, a filled container and an optional icon.  1. Container 2. Label text 3. Icon #### Text label attributes Element | Attribute | Related method(s) | Default value -------------- | ------------------------ | --------------------------------- | ------------- **Text label** | `android:text` | `setText`
`getText` | `null` **Color** | `android:textColor` | `setTextColor`
`getTextColor` | `?attr/colorOnPrimary` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/color/res/color/m3_button_foreground_color_selector.xml)) **Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceLabelLarge` #### Container attributes Element | Attribute | Related method(s) | Default value ---------------- | --------------------- | ---------------------------------------------------------------------------- | ------------- **Color** | `app:backgroundTint` | `setBackgroundColor`
`setBackgroundTintList`
`getBackgroundTintList` | `?attr/colorPrimary` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/color/res/color/m3_button_background_color_selector.xml)) **Stroke color** | `app:strokeColor` | `setStrokeColor`
`setStrokeColorResource`
`getStrokeColor` | `null` **Stroke width** | `app:strokeWidth` | `setStrokeWidth`
`setStrokeWidthResource`
`getStrokeWidth` | `0dp` **Shape** | `app:shapeAppearance` | `setShapeAppearanceModel`
`getShapeAppearanceModel` | `?attr/shapeAppearanceSmallComponent` **Elevation** | `app:elevation` | `setElevation`
`getElevation` | `2dp` **Ripple color** | `app:rippleColor` | `setRippleColor`
`setRippleColorResource`
`getRippleColor` | `?attr/colorOnPrimary` at 16% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/color/res/color/m3_button_ripple_color_selector.xml)) #### Icon attributes Element | Attribute | Related method(s) | Default value ----------------------------------------------- | ----------------- | --------------------------------------------------------- | ------------- **Icon** | `app:icon` | `setIcon`
`setIconResource`
`getIcon` | `null` **Color** | `app:iconTint` | `setIconTint`
`setIconTintResource`
`getIconTint` | `?attr/colorOnPrimary` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/color/res/color/m3_button_foreground_color_selector.xml)) **Size** | `app:iconSize` | `setIconSize`
`getIconSize` | `wrap_content` **Gravity** (position relative to text label) | `app:iconGravity` | `setIconGravity`
`getIconGravity` | `start` **Padding** (space between icon and text label) | `app:iconPadding` | `setIconPadding`
`getIconPadding` | `8dp` #### Styles Element | Style ------------------------- | ----------------------------------------------- **Default style** | `Widget.Material3.Button` **Icon style** | `Widget.Material3.Button.Icon` **Unelevated style** | `Widget.Material3.Button.UnelevatedButton` **Unelevated icon style** | `Widget.Material3.Button.UnelevatedButton.Icon` Default style theme attribute: `?attr/materialButtonStyle` See the full list of [styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/styles.xml) and [attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml). ## Filled tonal button [Filled tonal buttons](https://material.io/components/buttons/#filled-tonal-button) have a lighter background color and darker label color, making them less visually prominent than a regular filled button. They’re still used for final or unblocking actions in a flow, but may be better when these actions don’t require quite so much emphasis. ### Filled tonal button examples API and source code: * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) The following example shows a filled tonal button with a text label and a filled container.  In the layout: ```xml ``` In code: ```kt filledTonalButton.setOnClickListener { // Respond to button press } ``` #### Adding an icon to a filled tonal button The following example shows a filled tonal button with an icon.  In the layout: ```xml ``` ### Anatomy and key properties A filled tonal button has a text label, a filled container and an optional icon.  1. Container 2. Label text 3. Icon #### Text label attributes Element | Attribute | Related method(s) | Default value -------------- | ------------------------ | --------------------------------- | ------------- **Text label** | `android:text` | `setText`
`getText` | `null` **Color** | `android:textColor` | `setTextColor`
`getTextColor` | `?attr/colorOnSecondaryContainer` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/color/res/color/m3_button_foreground_color_selector.xml)) **Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceLabelLarge` #### Container attributes Element | Attribute | Related method(s) | Default value ---------------- | --------------------- | ---------------------------------------------------------------------------- | ------------- **Color** | `app:backgroundTint` | `setBackgroundColor`
`setBackgroundTintList`
`getBackgroundTintList` | `?attr/colorSecondaryContainer` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/color/res/color/m3_button_background_color_selector.xml)) **Stroke color** | `app:strokeColor` | `setStrokeColor`
`setStrokeColorResource`
`getStrokeColor` | `null` **Stroke width** | `app:strokeWidth` | `setStrokeWidth`
`setStrokeWidthResource`
`getStrokeWidth` | `0dp` **Shape** | `app:shapeAppearance` | `setShapeAppearanceModel`
`getShapeAppearanceModel` | `?attr/shapeAppearanceSmallComponent` **Elevation** | `app:elevation` | `setElevation`
`getElevation` | `2dp` **Ripple color** | `app:rippleColor` | `setRippleColor`
`setRippleColorResource`
`getRippleColor` | `?attr/colorOnSecondaryContainer` at 16% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/color/res/color/m3_tonal_button_ripple_color_selector.xml)) #### Icon attributes Element | Attribute | Related method(s) | Default value ----------------------------------------------- | ----------------- | --------------------------------------------------------- | ------------- **Icon** | `app:icon` | `setIcon`
`setIconResource`
`getIcon` | `null` **Color** | `app:iconTint` | `setIconTint`
`setIconTintResource`
`getIconTint` | `?attr/colorOnSecondaryContainer` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/color/res/color/m3_button_foreground_color_selector.xml)) **Size** | `app:iconSize` | `setIconSize`
`getIconSize` | `wrap_content` **Gravity** (position relative to text label) | `app:iconGravity` | `setIconGravity`
`getIconGravity` | `start` **Padding** (space between icon and text label) | `app:iconPadding` | `setIconPadding`
`getIconPadding` | `8dp` #### Styles Element | Style ----------------- | ------------------------------------------ **Default style** | `Widget.Material3.Button.TonalButton` **Icon style** | `Widget.Material3.Button.TonalButton.Icon` See the full list of [styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/styles.xml) and [attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml). ## Outlined button [Outlined buttons](https://material.io/components/buttons/#outlined-button) are for actions that need attention but aren’t the primary action, such as “See all” or “Add to cart.” This is also the button used to give someone the opportunity to change their mind or escape a flow. ### Outlined button examples API and source code: * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) The following example shows an outlined button with a text label and stroked container.  In the layout: ```xml ``` In code: ```kt outlinedButton.setOnClickListener { // Respond to button press } ``` #### Adding an icon to an outlined button The following example shows an outlined button with an icon.  In the layout: ```xml ``` ### Anatomy and key properties An outlined button has a text label, a stroked container and an optional icon.  1. Container 2. Label text 3. Icon #### Text label attributes Element | Attribute | Related method(s) | Default value -------------- | ------------------------ | --------------------------------- | ------------- **Text label** | `android:text` | `setText`
`getText` | `null` **Color** | `android:textColor` | `setTextColor`
`getTextColor` | `?attr/colorOnSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_foreground_color_selector.xml)) **Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceLabelLarge` #### Container attributes Element | Attribute | Related method(s) | Default value ---------------- | --------------------- | ---------------------------------------------------------------------------- | ------------- **Color** | `app:backgroundTint` | `setBackgroundColor`
`setBackgroundTintList`
`getBackgroundTintList` | `@android:color/transparent` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_background_color_selector.xml)) **Stroke color** | `app:strokeColor` | `setStrokeColor`
`setStrokeColorResource`
`getStrokeColor` | `?attr/colorOnSurface` at 12% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_button_outline_color_selector.xml)) **Stroke width** | `app:strokeWidth` | `setStrokeWidth`
`setStrokeWidthResource`
`getStrokeWidth` | `1dp` **Shape** | `app:shapeAppearance` | `setShapeAppearanceModel`
`getShapeAppearanceModel` | `?attr/shapeAppearanceSmallComponent` **Elevation** | `app:elevation` | `setElevation`
`getElevation` | `0dp` **Ripple color** | `app:rippleColor` | `setRippleColor`
`setRippleColorResource`
`getRippleColor` | `?attr/colorOnSurface` at 16% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_ripple_color_selector.xml)) #### Icon attributes Element | Attribute | Related method(s) | Default value ----------------------------------------------- | ----------------- | --------------------------------------------------------- | ------------- **Icon** | `app:icon` | `setIcon`
`setIconResource`
`getIcon` | `null` **Color** | `app:iconTint` | `setIconTint`
`setIconTintResource`
`getIconTint` | `?attr/colorOnSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_foreground_color_selector.xml)) **Size** | `app:iconSize` | `setIconSize`
`getIconSize` | `wrap_content` **Gravity** (position relative to text label) | `app:iconGravity` | `setIconGravity`
`getIconGravity` | `start` **Padding** (space between icon and text label) | `app:iconPadding` | `setIconPadding`
`getIconPadding` | `8dp` #### Styles Element | Style ----------------- | --------------------------------------------- **Default style** | `Widget.Material3.Button.OutlinedButton` **Icon style** | `Widget.Material3.Button.OutlinedButton.Icon` Default style theme attribute: `?attr/materialButtonOutlinedStyle` See the full list of [styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/styles.xml) and [attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml). ## Text button [Text buttons](https://material.io/components/buttons/#text-button) have less visual prominence, so should be used for low emphasis actions, such as when presenting multiple options. ### Text button examples API and source code: * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) The following example shows a text button with a text label.  In the layout: ```xml ``` In code: ```kt textButton.setOnClickListener { // Respond to button press } ``` #### Adding an icon to a text button The following example shows a text button with an icon.  In the layout: ```xml ``` ### Anatomy and key properties A text button has a text label, a transparent container and an optional icon.  1. Label text 2. Icon #### Text label attributes Element | Attribute | Related method(s) | Default value -------------- | ------------------------ | --------------------------------- | ------------- **Text label** | `android:text` | `setText`
`getText` | `null` **Color** | `android:textColor` | `setTextColor`
`getTextColor` | `?attr/colorOnSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_foreground_color_selector.xml)) **Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceLabelLarge` #### Container attributes Element | Attribute | Related method(s) | Default value ---------------- | --------------------- | ---------------------------------------------------------------------------- | ------------- **Color** | `app:backgroundTint` | `setBackgroundColor`
`setBackgroundTintList`
`getBackgroundTintList` | `@android:color/transparent` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_background_color_selector.xml)) **Stroke color** | `app:strokeColor` | `setStrokeColor`
`setStrokeColorResource`
`getStrokeColor` | `null` **Stroke width** | `app:strokeWidth` | `setStrokeWidth`
`setStrokeWidthResource`
`getStrokeWidth` | `0dp` **Shape** | `app:shapeAppearance` | `setShapeAppearanceModel`
`getShapeAppearanceModel` | `?attr/shapeAppearanceSmallComponent` **Elevation** | `app:elevation` | `setElevation`
`getElevation` | `0dp` **Ripple color** | `app:rippleColor` | `setRippleColor`
`setRippleColorResource`
`getRippleColor` | `?attr/colorOnSurface` at 16% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_ripple_color_selector.xml)) #### Icon attributes Element | Attribute | Related method(s) | Default value ----------------------------------------------- | ----------------- | --------------------------------------------------------- | ------------- **Icon** | `app:icon` | `setIcon`
`setIconResource`
`getIcon` | `null` **Color** | `app:iconTint` | `setIconTint`
`setIconTintResource`
`getIconTint` | `?attr/colorOnSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_foreground_color_selector.xml)) **Size** | `app:iconSize` | `setIconSize`
`getIconSize` | `wrap_content` **Gravity** (position relative to text label) | `app:iconGravity` | `setIconGravity`
`getIconGravity` | `start` **Padding** (space between icon and text label) | `app:iconPadding` | `setIconPadding`
`getIconPadding` | `8dp` #### Styles Element | Style ---------------------- | ----------------------------------------------------- **Default style** | `Widget.Material3.Button.TextButton` **Icon style** | `Widget.Material3.Button.TextButton.Icon` **Full Width Buttons** | `Widget.Material3.Button.TextButton.Dialog.FullWidth` Default style theme attribute: `?attr/borderlessButtonStyle` See the full list of [styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/styles.xml) and [attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml). ## Toggle button [Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices. There are two types of toggle buttons: * [Toggle button](#toggle-button) * [Icon](#icon) ### Toggle button To emphasize groups of related toggle buttons, a group should share a common container. #### Toggle button examples API and source code: * `MaterialButtonToggleGroup` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButtonToggleGroup) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButtonToggleGroup.java) * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) The following example shows a toggle button with three buttons that have text labels.  In the layout: ```xml ``` In code: ```kt toggleButton.addOnButtonCheckedListener { toggleButton, checkedId, isChecked -> // Respond to button selection } ``` #### Implementing an icon-only toggle button The following example shows a toggle button with three buttons that have icons.  In `res/values/styles.xml`: ```xml ``` In the layout: ```xml ``` ### Anatomy and key properties A toggle button has a shared stroked container, icons and/or text labels.  1. Container 2. Icon #### Selection attributes Element | Attribute | Related method(s) | Default value ----------------------------------- | ----------------------- | ------------------------------------------------ | ------------- **Single selection** | `app:singleSelection` | `setSingleSelection`
`isSingleSelection` | `false` **Selection required** | `app:selectionRequired` | `setSelectionRequired`
`isSelectionRequired` | `false` **Enable the group and all children | `android:enabled` | `setEnabled`
`isEnabled` | `true` #### Styles Element | Style ----------------- | ----------------------------------------------------- **Default style** | `Widget.Material3.MaterialButtonToggleGroup` Default style theme attribute: `?attr/materialButtonToggleGroupStyle` See the full list of [styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/styles.xml) and [attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml). ### Icon Icons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite. #### Icon example API and source code: * `CheckBox` * [Class description](https://developer.android.com/reference/android/widget/CheckBox) **Note** The `CheckBox` API is just one of several inputs that can implement the icon button. See other [selection controls](https://material.io/components/selection-controls/) for more details. The following example shows an icon that can be used independently or in items of a `RecyclerView`.  In the layout: ```xml ``` In `res/drawable/sl_favourite_24dp.xml`: ```xml ``` In code: ```kt icon.setOnCheckedChangeListener { checkBox, isChecked -> // Respond to icon toggle } ``` ## Icon button [Icon buttons](https://material.io/components/buttons/#icon-buttons) help users take supplementary actions with a single tap. There are two types of icon buttons: standard and contained. * **Standard icon button:** By default icon buttons will not have a container. * **Contained icon button:** Optionally, it is possible to have a container around the icon. See [Icon button examples](#icon-button-examples) section below for more information. ### Usage * Icon buttons should be used when a compact button is required, such as in a toolbar. * Icon buttons can take the form of a wide range of system icons. * Ensure the meaning of the icon is unambiguous. * Ensure that the tooltip describes the button’s action, rather than the icon. #### Icon button examples API and source code: * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) #### Standard Icon button The following example shows a standard icon button.  In the layout: ```xml ``` In code: ```kt iconButton.addOnButtonCheckedListener { iconButton, checkedId, isChecked -> // Respond to button selection } ``` #### Filled Icon button The following example shows a contained icon button that is filled.  In the layout: ```xml ``` #### Filled Tonal Icon button The following example shows a tonal icon button.  In the layout: ```xml ``` #### Outlined Icon button The following example shows an outlined icon button.  In the layout: ```xml ``` #### Styles & Theme attributes Element | Style | Theme Attribute ---------------------------- | ------------------------------------------------- | --------------- **Default style** | `Widget.Material3.Button.IconButton` | `?attr/materialIconButtonStyle` **Filled Icon Button** | `Widget.Material3.Button.IconButton.Filled` | `?attr/materialIconButtonFilledStyle` **Filled Tonal Icon Button** | `Widget.Material3.Button.IconButton.Filled.Tonal` | `?attr/materialIconButtonFilledTonalStyle` **Outlined Icon Button** | `Widget.Material3.Button.IconButton.Outlined` | `?attr/materialIconButtonOutlinedStyle` See the full list of [styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/styles.xml) and [attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml). ## Theming buttons Buttons support [Material Theming](https://material.io/components/buttons/#theming) and can be customized in terms of color, typography and shape. ### Button theming example API and source code: * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) The following example shows text, outlined and filled button types with Material Theming.  #### Implementing button theming Use theme attributes and styles in `res/values/styles.xml` to add the theme to all buttons. This affects other components: ```xml ``` Use default style theme attributes, styles and theme overlays. This adds the theme to all buttons but does not affect other components: ```xml ``` Use one of the styles in the layout. That will affect only this button: ```xml ```