Design/net.ikea.skapa.ui.components/DualButton

DualButton

fun DualButton(firstButton: DualButtonParams, secondButton: DualButtonParams, modifier: Modifier = Modifier, variant: DualButtonVariant = DualButtonVariant.Primary, size: DualButtonSize = DualButtonSize.Medium, orientation: Orientation = Orientation.Horizontal, onClick: (position: DualButtonPosition) -> Unit)

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

firstButton

DualButtonParams First button in the layout.

secondButton

DualButtonParams Second button in the layout.

modifier

Modifier to be applied to the DualButton

variant

DualButtonVariant used. Default is DualButtonVariant.Primary

size

DualButtonSize Small or Medium. Default is Medium.

orientation

Use Orientation.Horizontal to have the buttons side-by-side or Orientation.Vertical to stack the buttons vertically.

onClick

Callback action to click actions. Use DualButtonPosition to determine button position.

Samples

import android.content.res.Configuration.UI_MODE_NIGHT_YES
import androidx.annotation.DrawableRes
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsFocusedAsState
import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.Surface
import androidx.compose.material3.VerticalDivider
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.RoundRect
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.graphics.drawscope.rotate
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.Orientation
import net.ikea.skapa.ui.components.DualButtonProps.HalfCircleDegrees
import net.ikea.skapa.ui.components.DualButtonProps.MediumHeight
import net.ikea.skapa.ui.components.DualButtonProps.NoRotationDegrees
import net.ikea.skapa.ui.components.DualButtonProps.QuarterCircleDegrees
import net.ikea.skapa.ui.components.DualButtonProps.SmallHeight
import net.ikea.skapa.ui.components.DualButtonProps.keyboardFocusPadding
import net.ikea.skapa.ui.components.DualButtonProps.keyboardFocusShape
import net.ikea.skapa.ui.components.DualButtonSize.Medium
import net.ikea.skapa.ui.components.DualButtonSize.Small
import net.ikea.skapa.ui.components.DualButtonVariant.Primary
import net.ikea.skapa.ui.components.DualButtonVariant.Secondary
import net.ikea.skapa.ui.components.DualButtonVariant.SecondaryInverse
import net.ikea.skapa.ui.isRtl
import net.ikea.skapa.ui.util.FocusBorderType
import net.ikea.skapa.ui.util.focusableWithBorder
import net.ikea.skapa.ui.util.minimumTouchTargetSize
import net.ikea.skapa.ui.util.pointerHoverHandIcon

fun main() { 
   //sampleStart 
   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
            ) {}
        }
    }
} 
   //sampleEnd
}

DualButton

Parameters

See also

Samples