---
title: "WideButton"
description: "Material Design wide button for TV."
type: "component"
---

<div class='type'>Composable Component</div>



Material Design wide button for TV.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
fun WideButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    background: @Composable () -> Unit = {
        WideButtonDefaults.Background(enabled = enabled, interactionSource = interactionSource)
    },
    scale: ButtonScale = WideButtonDefaults.scale(),
    glow: ButtonGlow = WideButtonDefaults.glow(),
    shape: ButtonShape = WideButtonDefaults.shape(),
    contentColor: WideButtonContentColor = WideButtonDefaults.contentColor(),
    tonalElevation: Dp = Elevation.Level0,
    border: ButtonBorder = WideButtonDefaults.border(),
    contentPadding: PaddingValues = WideButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| onClick | called when this button is clicked |
| modifier | the `Modifier` to be applied to this button |
| onLongClick | called when this button is long clicked (long-pressed). |
| enabled | controls the enabled state of this button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| interactionSource | a hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. |
| background | the background to be applied to the `WideButton` |
| scale | Defines size of the Button relative to its original size. |
| glow | Shadow to be shown behind the Button. |
| shape | Defines the Button's shape. |
| contentColor | Color to be used for the text content of the Button |
| tonalElevation | tonal elevation used to apply a color shift to the button to give the it higher emphasis |
| border | Defines a border around the Button. |
| contentPadding | the spacing values to apply internally between the container and the content |
| content | the content of the button |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
fun WideButton(
    onClick: () -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    icon: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    background: @Composable () -> Unit = {
        WideButtonDefaults.Background(enabled = enabled, interactionSource = interactionSource)
    },
    scale: ButtonScale = WideButtonDefaults.scale(),
    glow: ButtonGlow = WideButtonDefaults.glow(),
    shape: ButtonShape = WideButtonDefaults.shape(),
    contentColor: WideButtonContentColor = WideButtonDefaults.contentColor(),
    tonalElevation: Dp = Elevation.Level0,
    border: ButtonBorder = WideButtonDefaults.border(),
    contentPadding: PaddingValues = WideButtonDefaults.ContentPadding,
)
```


#### Parameters

| | |
| --- | --- |
| onClick | called when this button is clicked |
| title | the title content of the button, typically a `Text` |
| modifier | the `Modifier` to be applied to this button |
| onLongClick | called when this button is long clicked (long-pressed). |
| enabled | controls the enabled state of this button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| icon | the leading icon content of the button, typically an `Icon` |
| subtitle | the subtitle content of the button, typically a `Text` |
| interactionSource | a hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. |
| background | the background to be applied to the `WideButton` |
| scale | Defines size of the Button relative to its original size. |
| glow | Shadow to be shown behind the Button. |
| shape | Defines the Button's shape. |
| contentColor | Color to be used for the text content of the Button |
| tonalElevation | tonal elevation used to apply a color shift to the button to give the it higher emphasis |
| border | Defines a border around the Button. |
| contentPadding | the spacing values to apply internally between the container and the content |






## Code Examples
### WideButtonSample
```kotlin
@Composable
fun WideButtonSample() {
    WideButton(onClick = {}) { Text("Settings") }
}
```
### WideButtonWithIcon
```kotlin
@Composable
fun WideButtonWithIcon() {
    WideButton(
        onClick = {},
        title = { Text("Settings") },
        icon = { Icon(imageVector = Icons.Default.Settings, contentDescription = "Settings") },
    )
}
```
### WideButtonWithIconAndSubtitle
```kotlin
@Composable
fun WideButtonWithIconAndSubtitle() {
    WideButton(
        onClick = {},
        title = { Text("Settings") },
        subtitle = { Text(text = "Update device preferences") },
        icon = { Icon(imageVector = Icons.Default.Settings, contentDescription = "Settings") },
    )
}
```
### WideButtonWithSubtitle
```kotlin
@Composable
fun WideButtonWithSubtitle() {
    WideButton(
        onClick = {},
        title = { Text("Settings") },
        subtitle = { Text(text = "Update device preferences") },
    )
}
```