---
title: "ButtonGroupScope"
description: "Button group scope used to indicate a [Modifier.weight] and [Modifier.animateWidth] of a child
element. Also defines the DSL to build the content of a [ButtonGroup]"
type: "interface"
---

<div class='type'>Interface</div>


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

<div class='sourceset sourceset-common'>Common</div>



```kotlin
@ExperimentalMaterial3ExpressiveApi
interface ButtonGroupScope
```


Button group scope used to indicate a `Modifier.weight` and `Modifier.animateWidth` of a child
element. Also defines the DSL to build the content of a `ButtonGroup`


## Functions

```kotlin
fun Modifier.weight(
        @FloatRange(from = 0.0, fromInclusive = false) weight: Float,
        fill: Boolean = true,
    ): Modifier
```


Size the element's width proportional to its `weight` relative to other weighted sibling
elements in the `ButtonGroup`. The parent will divide the horizontal space remaining after
measuring unweighted child elements and distribute it according to this weight. When `fill`
is true, the element will be forced to occupy the whole width allocated to it. Otherwise, the
element is allowed to be smaller - this will result in `ButtonGroup` being smaller, as the
unused allocated width will not be redistributed to other siblings.

#### Parameters

| | |
| --- | --- |
| weight | The proportional width to give to this element, as related to the total of all weighted siblings. Must be positive. |
| fill | When `true`, the element will occupy the whole width allocated. |



```kotlin
fun Modifier.weight(@FloatRange(from = 0.0, fromInclusive = false) weight: Float): Modifier
```


Size the element's width proportional to its `weight` relative to other weighted sibling
elements in the `ButtonGroup`. The parent will divide the horizontal space remaining after
measuring unweighted child elements and distribute it according to this weight.

#### Parameters

| | |
| --- | --- |
| weight | The proportional width to give to this element, as related to the total of all weighted siblings. Must be positive. |



```kotlin
fun Modifier.animateWidth(interactionSource: InteractionSource): Modifier
```


Specifies the interaction source to use with this item. This is used to listen to events and
animate growing the pressed button and shrink the neighbor(s).

#### Parameters

| | |
| --- | --- |
| interactionSource | the `InteractionSource` that button group will observe. |



```kotlin
fun Modifier.align(alignment: Alignment.Vertical): Modifier
```


Align the element vertically within the `ButtonGroup`. This alignment will have priority over
the `ButtonGroup`'s `verticalAlignment` parameter.

#### Parameters

| | |
| --- | --- |
| alignment | the vertical alignment of the element |



```kotlin
fun clickableItem(
        onClick: () -> Unit,
        label: String,
        icon: (@Composable () -> Unit)? = null,
        weight: Float = Float.NaN,
        enabled: Boolean = true,
    )
```


Adds a clickable item to the `ButtonGroup`.

#### Parameters

| | |
| --- | --- |
| onClick | The action to perform when the item is clicked. |
| label | The text label for the item. |
| icon | An optional composable representing the item's icon. |
| weight | the weight to be applied to this item, please see `ButtonGroupScope.weight` |
| enabled | Whether the item is enabled. |



```kotlin
fun toggleableItem(
        checked: Boolean,
        label: String,
        onCheckedChange: (Boolean) -> Unit,
        icon: (@Composable () -> Unit)? = null,
        weight: Float = Float.NaN,
        enabled: Boolean = true,
    )
```


Adds a toggleable item to the `ButtonGroup`.

#### Parameters

| | |
| --- | --- |
| checked | Whether the item is currently checked. |
| onCheckedChange | The action to perform when the item's checked state changes. |
| icon | An optional composable representing the item's icon. |
| enabled | Whether the item is enabled. |
| weight | the weight to be applied to this item, please see `ButtonGroupScope.weight` |
| label | The text label for the item. |



```kotlin
fun customItem(
        buttonGroupContent: @Composable () -> Unit,
        menuContent: @Composable (ButtonGroupMenuState) -> Unit,
    )
```


Adds a custom item to the `ButtonGroup`.

#### Parameters

| | |
| --- | --- |
| buttonGroupContent | The composable to display in the app bar. |
| menuContent | The composable to display in the overflow menu. It receives an `ButtonGroupMenuState` instance. |