JumboButton
Jumbo Button component is a control used to trigger the final action on a linear flow. It has a predefined appearance based on Skapa design and guidelines.
Usage
Jumbo Buttons are used to emphasise the final step of a linear flow, typically at the end of a purchase journey. Its’ core objective is to emphasise a critical action to be taken next.
Consider only using the Jumbo Buttons in the final step of a flow, as its' visual prominence will be more useful to convey a critical decision, such as the confirmation of a payment in the purchase flow.
Likewise a regular button, the Jumbo Button is created by at minimum providing a title and an action. The action is either a method or closure property that does something when a user clicks the button. The label is a String that describes the button's action.
The default JumboButton style will match Regular Jumbo Button variant from Skapa.
Regular Jumbo Button vs Footer Jumbo Button
Regular variant is suitable for use on larger screens. They are inset and inline like a typical button. The Footer variant can make the button label and arrow affordance feel distant when stretched too wide. The Footer variant is better suited to small screens or containers and usually bookends the screen by filling it from edge to edge.
Parameters
The text to be displayed.
Modifier to be applied to the button.
Controls the enabled state of the button. When false, this button will not be clickable.
Indicator to define the shape and the usage of the button.
Controls to display state of the button. When true, this button will display the LoadingBall instead the Text.
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 button.
See also
Samples
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Divider
import net.ikea.skapa.ui.components.JumboButton
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
var loadingState by rememberSaveable { mutableStateOf(false) }
Column(
modifier = Modifier.padding(horizontal = SkapaSpacing.space125, vertical = SkapaSpacing.space75),
verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space100),
horizontalAlignment = Alignment.Start
) {
Text(
style = SkapaTheme.typography.headingS,
text = "Wish list summary"
)
PriceDetailRow(label = "Price excluding VAT", price = "239 :-")
PriceDetailRow(label = "VAT", price = "60 :-")
Divider()
PriceDetailRow(label = "Regular price", price = "299 :-", isTotal = true)
JumboButton("Add all items to Shopping Bag", loading = loadingState) {
/* Do something */
loadingState = !loadingState
}
}
}
//sampleEnd
}