DualButton
Dual button is a group of two buttons with binary actions.
Use DualButtonVariant.Primary to stand out on top of images or other graphics such as interactive maps. Uses Static colors. Use DualButtonVariant.Secondary for low emphasis. Adapts to Light/Dark Themes. Use DualButtonVariant.SecondaryInverse Use secondary inverse dual buttons for low emphasis on dark backgrounds. Uses static colors.
Example of usage:
Parameters
DualButtonParams First button in the layout.
DualButtonParams Second button in the layout.
Modifier to be applied to the DualButton
DualButtonVariant used. Default is DualButtonVariant.Primary
DualButtonSize Small or Medium. Default is Medium.
Use Orientation.Horizontal to have the buttons side-by-side or Orientation.Vertical to stack the buttons vertically.
Callback action to click actions. Use DualButtonPosition to determine button position.
See also
Samples
SkapaTheme2(darkTheme = isSystemInDarkTheme()) {
Surface(color = SkapaTheme.colors.neutral1) {
Column(modifier = Modifier.padding(SkapaSpacing.space100)) {
DualButton(
firstButton = DualButtonParams(
R.drawable.ic_dual_button_minus,
contentDescription = "Minus",
enabled = true
),
secondButton = DualButtonParams(
R.drawable.ic_dual_button_plus,
contentDescription = "Plus",
enabled = true
),
variant = DualButtonVariant.Secondary,
orientation = Orientation.Horizontal,
size = DualButtonSize.Small
) {}
DualButton(
firstButton = DualButtonParams(
R.drawable.ic_dual_button_plus_small,
contentDescription = "Plus",
enabled = true
),
secondButton = DualButtonParams(
R.drawable.ic_dual_button_minus_small,
contentDescription = "Minus",
enabled = true
),
variant = DualButtonVariant.Secondary,
orientation = Orientation.Vertical,
size = DualButtonSize.Small
) {}
}
}
}