IconPill
Icon Pill component is a button that represents an attribute or unit of data. It's built on top of androidx.compose.material.Button and comes with predefined appearance based on Skapa design and guidelines.
You create a button by at minimum providing an icon, and an action. The icon is a DrawableRes id and must point to either fully rasterized images (ex. PNG or JPG files) or VectorDrawable xml assets. The action is either a method or closure property that does something when a user clicks the button.
Parameters
Resources object to query the image file from.
text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar.
Modifier to be applied to the IconPill.
Controls the enabled state of the button. When false, this button will not be clickable.
IconPillSize defines the size of the pill. The default value is IconPillSize.Medium.
Controls to display state of the pill.
The MutableInteractionSource representing the stream of Interactions for this component. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this component in different Interactions.
Will be called when the user clicks the IconPill.
See also
Samples
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.IconExample
import net.ikea.skapa.ui.components.IconPill
import net.ikea.skapa.ui.components.IconPillSize
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
var state by remember { mutableStateOf(false) }
IconPill(
iconResource = IconExample,
contentDescription = "Content Description",
enabled = true,
selected = state
) {
/* Do something*/
state = !state // Change State
}
IconPill(
iconResource = IconExample,
contentDescription = "Content Description",
size = IconPillSize.Small,
selected = state
) {
/* Do something*/
state = !state // Change State
}
}
}
//sampleEnd
}