---
title: "Style"
description: "Style represents an opaque type which encodes a description of how to style a node in compose. It
is implemented semantically like a lambda which is executed on a [StyleScope].

These Style objects allow for styles to be defined similarly to a chain of Modifiers, however
these Styles are applied by passing them into a [styleable] Modifier, or by passing them into an
appropriately defined Style parameter of a Composable function.

The primary benefits of Style objects are:
1. They define their own observation scope, meaning you can read [State] objects inside of them  without risking recomposition. Properties that are changed as a result of the State changing  will cause only the minimal invalidation possible (ie, changing `background` will only cause a  redraw)
2. CompositionLocals can be read inside of them. This allows for many theme-based values to be  used in their definition without adding to the capture scope of the lambda.
3. The [StyleScope] interface allows for state-based styling to be defined such as \"pressed\"  states or \"hover\" states or \"focus\" states.
4. Transition-based animations of style properties can be done automatically without defining any  animated values by leveraging the animate API."
type: "interface"
---

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


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

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



```kotlin
@ExperimentalFoundationStyleApi
fun interface Style
```


Style represents an opaque type which encodes a description of how to style a node in compose. It
is implemented semantically like a lambda which is executed on a `StyleScope`.

These Style objects allow for styles to be defined similarly to a chain of Modifiers, however
these Styles are applied by passing them into a `styleable` Modifier, or by passing them into an
appropriately defined Style parameter of a Composable function.

The primary benefits of Style objects are:
1. They define their own observation scope, meaning you can read `State` objects inside of them  without risking recomposition. Properties that are changed as a result of the State changing  will cause only the minimal invalidation possible (ie, changing `background` will only cause a  redraw)
2. CompositionLocals can be read inside of them. This allows for many theme-based values to be  used in their definition without adding to the capture scope of the lambda.
3. The `StyleScope` interface allows for state-based styling to be defined such as "pressed"  states or "hover" states or "focus" states.
4. Transition-based animations of style properties can be done automatically without defining any  animated values by leveraging the animate API.


## Functions

```kotlin
fun StyleScope.applyStyle()
```


## Code Examples

### SimpleStyleSample
```kotlin
@Composable
fun SimpleStyleSample() {
    // Create a styleable box
    @Composable
    fun StyleableBox(modifier: Modifier = Modifier, style: Style = Style) {
        Box(modifier = modifier.styleable(null, style))
    }
    // Style the styleable box to be a 150x150 green box
    StyleableBox(
        style = {
            background(Color.Green)
            size(150.dp)
        }
    )
}
```

### StyleAnimationSample
```kotlin
@Composable
fun StyleAnimationSample() {
    // Create a styleable clickable box
    @Composable
    fun ClickableStyleableBox(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        style: Style = Style,
        enabled: Boolean = true,
    ) {
        val interactionSource = remember { MutableInteractionSource() }
        val styleState = rememberUpdatedStyleState(interactionSource) { it.isEnabled = enabled }
        Box(
            modifier =
                modifier
                    .clickable(interactionSource = interactionSource, onClick = onClick)
                    .styleable(styleState, style)
        )
    }
    ClickableStyleableBox(
        onClick = {},
        style = {
            background(Color.Blue)
            size(150.dp)
            hovered { animate { background(Color.Yellow) } }
            pressed { animate { background(Color.Red) } }
            disabled { animate { background(Color.Gray) } }
        },
    )
}
```