# styleable

Common/All

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleResolver)(styleResolver: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver)` Transitionary modifier. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.[styleable](https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState))(styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState?)` **This function is deprecated.** The styleable() modifier must provide one or more 'style' parameter values. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,androidx.compose.foundation.style.Style)(styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState?, style: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style)` Modifier that creates a region that is styled by the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` object for the component this Modifier is attached to. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/ExperimentalFoundationStyleApi https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,kotlin.Array)(styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState?, vararg styles: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style)` Modifier that creates a region that is styled by the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` object for the component this Modifier is attached to. | Cmn |

## Functions

### Modifier.styleable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StyleModifier.kt+function:styleable) Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.13.0-rc01)

```
fun Modifier.styleable(styleResolver: StyleResolver): Modifier
```

Transitionary modifier. Do not use. This will be removed before the Styles API is stable.

This modifier is to help enable transition between the old `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` based API and the new `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/CustomStyle` based API. This duplicates the behavior of the properties from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style`.

This modifier is an intermediate step from `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleResolver)` that takes just a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` to one that takes a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleResolver`.

This will be moved to be an example of how to use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/appearance.modifier#(androidx.compose.ui.Modifier).appearance(kotlin.Function1)` to implement the style properties similar to those provided in `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style`.

### Modifier.styleable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StyleModifier.kt+function:styleable) Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0) Deprecated in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
@ExperimentalFoundationStyleApi
fun Modifier.[styleable](https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState))(styleState: StyleState?): Modifier
```

> [!CAUTION]
> **This function is deprecated.**   
> The styleable() modifier must provide one or more 'style' parameter values. Calling it with no style parameter values has no effect.

Modifier that creates a region that is styled by the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` object for the component this Modifier is attached to. Styles that are further "to the right", will have the properties they set override set properties of Styles to the left of them.

Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState)` to creates a "styleable" component whose looks can be customized using the provided `style` together with one or more default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` objects. This should be called by a component that wishes to make itself styleable via a `style: Style = Style` parameter. If a component already takes a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` parameter, then that component internally is applying the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState)`, and that `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` parameter should be used instead of applying `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState)` again,

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState)` is added to a modifier chain that is after an another `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState)`, then the second region will wrap around the first. For example, if the two regions both supply padding then the padding will the sum of both regions.

| Parameters |
|---|---|
| `styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState?` | the state the style will use to decide which styles should be applied. If `null` is supplied, the style will only see the default state that will never be changed. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` |   |

### Modifier.styleable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StyleModifier.kt+function:styleable) Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
@ExperimentalFoundationStyleApi
fun Modifier.styleable(styleState: StyleState? = null, style: Style): Modifier
```

Modifier that creates a region that is styled by the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` object for the component this Modifier is attached to.

Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,androidx.compose.foundation.style.Style)` to creates a "styleable" component whose looks can be customized using the provided style. This should be called by a component that wishes to make itself styleable via a `style: Style = Style` parameter. If a component already takes a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` parameter, then that component internally is applying the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,androidx.compose.foundation.style.Style)`, and that `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` parameter should be used instead of applying `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,androidx.compose.foundation.style.Style)` again.

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,androidx.compose.foundation.style.Style)` is added to a modifier chain that is after an another `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,androidx.compose.foundation.style.Style)`, then the second region will wrap around the first. For example, if the two regions both supply padding then the padding will the sum of both regions.

| Parameters |
|---|---|
| `styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState? = null` | the state the style will use to decide which styles should be applied. If `null` is supplied, the style will only see the default state that will never be changed. |
| `style: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` | the style to apply to the styleable region. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` |   |

### Modifier.styleable

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/style/StyleModifier.kt+function:styleable) Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
@ExperimentalFoundationStyleApi
fun Modifier.styleable(styleState: StyleState?, vararg styles: Style): Modifier
```

Modifier that creates a region that is styled by the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` object for the component this Modifier is attached to. Styles that are further "to the right", will have the properties they set override set properties of Styles to the left of them.

Apply `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,kotlin.Array)` to creates a "styleable" component whose looks can be customized using the provided `style` together with one or more default `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` objects. This should be called by a component that wishes to make itself styleable via a `style: Style = Style` parameter. If a component already takes a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` parameter, then that component internally is applying the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,kotlin.Array)`, and that `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` parameter should be used instead of applying `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,kotlin.Array)` again,

If `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,kotlin.Array)` is added to a modifier chain that is after an another `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/styleable.modifier#(androidx.compose.ui.Modifier).styleable(androidx.compose.foundation.style.StyleState,kotlin.Array)`, then the second region will wrap around the first. For example, if the two regions both supply padding then the padding will the sum of both regions.

| Parameters |
|---|---|
| `styleState: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleState?` | the state the style will use to decide which styles should be applied. If `null` is supplied, the style will only see the default state that will never be changed. |
| `vararg styles: https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` | the styles to apply, in order, to the stylable region. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/MutableStyleState` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/Style` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/style/StyleScope` |   |