spark/com.adevinta.spark.components.iconbuttons.toggle

Package-level declarations

IconToggleButtons take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

Styles

Icon toggle buttons come in various styles:

Filled
Tinted
Outlined
Contrast
Ghost


Light
Dark

Sizes

Icon toggle buttons come in 3 sizes IconToggleButtonSize.kt:

small - 32.dp (however, the minimum touch size is applied and is 44.dp)
medium - 44.dp (default)
large - 56.dp

The content icon is 16.dp for IconToggleButtonSize.Small and IconToggleButtonSize.Medium, and 24.dp for IconToggleButtonSize.Large

Intents

Icon Toggle Buttons support all intents:

Basic (default)
Accent
Main
Support
Success
Alert
Danger
Info
Neutral
Surface

IconToggleButtonFilled

Filled icon toggle buttons are the standard for most use cases. The filled styling places the most emphasis and should be used for important actions.

fun IconToggleButtonFilled(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    icons: IconToggleButtonIcons,
)

IconToggleButtonOutlined

Outlined icon toggle buttons are used for support actions. The outlined styling places less emphasis on these actions that are important but not the main ones.

Be aware that it's not advised to use it on top of images since it will be hard to see.

fun IconToggleButtonOutlined(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    icons: IconToggleButtonIcons,
)

IconToggleButtonTinted

Tinted icon toggle buttons are medium-emphasis buttons that is an alternative middle ground between default filled icon toggle buttons and outlined icon toggle buttons. They can be used in contexts where lower-priority icon button requires slightly more emphasis than an outline would give.

fun IconToggleButtonTinted(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    icons: IconToggleButtonIcons,
)

IconToggleButtonGhost

Ghost icon toggle buttons are used for the lowest priority actions, especially when presenting multiple options.

Ghost icon toggle buttons can be placed on a variety of backgrounds. Until the button is interacted with, its container isn’t visible. This button style is often used inside other components like snackbars, dialogs, and cards.

fun IconToggleButtonGhost(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    icons: IconToggleButtonIcons,
)

IconToggleButtonContrast

Contrast icon toggle buttons are used for the high to mid priority actions when the background is dark like on an image or a video.

fun IconToggleButtonContrast(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    icons: IconToggleButtonIcons,
)

Types

IconToggleButtonIcons

data class IconToggleButtonIcons(val checked: SparkIcon, val unchecked: SparkIcon)

Functions

IconToggleButtonContrast

fun IconToggleButtonContrast(checked: Boolean, onCheckedChange: (Boolean) -> Unit, icons: IconToggleButtonIcons, modifier: Modifier = Modifier, intent: IconButtonIntent = IconButtonDefaults.DefaultIntent, enabled: Boolean = true, shape: ButtonShape = IconButtonDefaults.DefaultShape, size: IconButtonSize = IconButtonDefaults.DefaultSize, contentDescription: String? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Icon toggle buttons help people take supplementary actions with a single tap. They’re used when a compact toggle button is required, such as in a toolbar or image list.

IconToggleButtonFilled

fun IconToggleButtonFilled(checked: Boolean, onCheckedChange: (Boolean) -> Unit, icons: IconToggleButtonIcons, modifier: Modifier = Modifier, intent: IconButtonIntent = IconButtonDefaults.DefaultIntent, enabled: Boolean = true, shape: ButtonShape = IconButtonDefaults.DefaultShape, size: IconButtonSize = IconButtonDefaults.DefaultSize, contentDescription: String? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Icon toggle buttons help people take supplementary actions with a single tap. They’re used when a compact toggle button is required, such as in a toolbar or image list.

IconToggleButtonGhost

fun IconToggleButtonGhost(checked: Boolean, onCheckedChange: (Boolean) -> Unit, icons: IconToggleButtonIcons, modifier: Modifier = Modifier, intent: IconButtonIntent = IconButtonDefaults.DefaultIntent, enabled: Boolean = true, shape: ButtonShape = IconButtonDefaults.DefaultShape, size: IconButtonSize = IconButtonDefaults.DefaultSize, contentDescription: String? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Icon toggle buttons help people take supplementary actions with a single tap. They’re used when a compact toggle button is required, such as in a toolbar or image list.

IconToggleButtonOutlined

fun IconToggleButtonOutlined(checked: Boolean, onCheckedChange: (Boolean) -> Unit, icons: IconToggleButtonIcons, modifier: Modifier = Modifier, intent: IconButtonIntent = IconButtonDefaults.DefaultIntent, enabled: Boolean = true, shape: ButtonShape = IconButtonDefaults.DefaultShape, size: IconButtonSize = IconButtonDefaults.DefaultSize, contentDescription: String? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Icon toggle buttons help people take supplementary actions with a single tap. They’re used when a compact toggle button is required, such as in a toolbar or image list.

IconToggleButtonTinted

fun IconToggleButtonTinted(checked: Boolean, onCheckedChange: (Boolean) -> Unit, icons: IconToggleButtonIcons, modifier: Modifier = Modifier, intent: IconButtonIntent = IconButtonDefaults.DefaultIntent, enabled: Boolean = true, shape: ButtonShape = IconButtonDefaults.DefaultShape, size: IconButtonSize = IconButtonDefaults.DefaultSize, contentDescription: String? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Icon toggle buttons help people take supplementary actions with a single tap. They’re used when a compact toggle button is required, such as in a toolbar or image list.