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,
)
Functions
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.
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.
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.
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.
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.