← Compose Multiplatform Component in Material 3 Compose
OutlinedCard
Common
Outlined cards contain content and actions that relate information about a subject. They have a visual boundary around the container. This can provide greater emphasis than the other types.
This OutlinedCard does not handle input events - see the other OutlinedCard overloads if you want a clickable or selectable OutlinedCard.
Last updated:
Installation
dependencies {
implementation("androidx.compose.material3:material3:1.3.0-beta04")
}
Overloads
@Composable
fun OutlinedCard(
modifier: Modifier = Modifier,
shape: Shape = CardDefaults.outlinedShape,
colors: CardColors = CardDefaults.outlinedCardColors(),
elevation: CardElevation = CardDefaults.outlinedCardElevation(),
border: BorderStroke = CardDefaults.outlinedCardBorder(),
content: @Composable ColumnScope.() -> Unit
)
Parameters
| name | description |
|---|---|
modifier | the [Modifier] to be applied to this card |
shape | defines the shape of this card's container, border (when [border] is not null), and shadow (when using [elevation]) |
colors | [CardColors] that will be used to resolve the color(s) used for this card in different states. See [CardDefaults.outlinedCardColors]. |
elevation | [CardElevation] used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See also: [Surface]. |
border | the border to draw around the container of this card |
@Composable
fun OutlinedCard(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
shape: Shape = CardDefaults.outlinedShape,
colors: CardColors = CardDefaults.outlinedCardColors(),
elevation: CardElevation = CardDefaults.outlinedCardElevation(),
border: BorderStroke = CardDefaults.outlinedCardBorder(enabled),
interactionSource: MutableInteractionSource? = null,
content: @Composable ColumnScope.() -> Unit
)
Parameters
| name | description |
|---|---|
onClick | called when this card is clicked |
modifier | the [Modifier] to be applied to this card |
enabled | controls the enabled state of this card. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
shape | defines the shape of this card's container, border (when [border] is not null), and shadow (when using [elevation]) |
colors | [CardColors] that will be used to resolve the color(s) used for this card in different states. See [CardDefaults.outlinedCardColors]. |
elevation | [CardElevation] used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See also: [Surface]. |
border | the border to draw around the container of this card |
interactionSource | an optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s for this card. You can use this to change the card's appearance or preview the card in different states. Note that if null is provided, interactions will still happen internally. |
Code Examples
OutlinedCardSample
@Composable
@Sampled
@Preview
fun OutlinedCardSample() {
OutlinedCard(Modifier.size(width = 180.dp, height = 100.dp)) {
Box(Modifier.fillMaxSize()) { Text("Card content", Modifier.align(Alignment.Center)) }
}
}
ClickableOutlinedCardSample
@Composable
@Sampled
@Preview
fun ClickableOutlinedCardSample() {
OutlinedCard(
onClick = { /* Do something */ },
modifier = Modifier.size(width = 180.dp, height = 100.dp)
) {
Box(Modifier.fillMaxSize()) { Text("Clickable", Modifier.align(Alignment.Center)) }
}
}
