spark/com.adevinta.spark.components.buttons/Button

Button

@Immutable
object Button(source)

Functions

Link copied to clipboard
@Composable
fun Button.Ai(onClick: () -> Unit, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = LeboncoinIcons.Sparks, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false, content: @Composable RowScope.() -> Unit)
@Composable
fun Button.Ai(onClick: () -> Unit, text: String, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = LeboncoinIcons.Sparks, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false)

Used for AI-powered actions. Always displays the Sparks icon to signal AI involvement.

Link copied to clipboard
@Composable
fun Button.Boost(onClick: () -> Unit, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false, content: @Composable RowScope.() -> Unit)
@Composable
fun Button.Boost(onClick: () -> Unit, text: String, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false)

Used for any action attached to a conversion or monetisation flow, such as "Boost my ad" or "Upgrade".

Link copied to clipboard
@Composable
fun Button.Contrast(onClick: () -> Unit, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false, content: @Composable RowScope.() -> Unit)
@Composable
fun Button.Contrast(onClick: () -> Unit, text: String, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false)

Contrast buttons are used on coloured or image backgrounds where standard buttons lack visibility. They use a surface container to stand out against any background.

Link copied to clipboard
@Composable
fun Button.Danger(onClick: () -> Unit, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false, content: @Composable RowScope.() -> Unit)
@Composable
fun Button.Danger(onClick: () -> Unit, text: String, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false)

Used for destructive or irreversible actions like "Delete" or "Remove". Warns the user of negative consequences.

Link copied to clipboard
@Composable
fun Button.Ghost(onClick: () -> Unit, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false, content: @Composable RowScope.() -> Unit)
@Composable
fun Button.Ghost(onClick: () -> Unit, text: String, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false)

Ghost buttons are used for the lowest priority actions, especially when presenting multiple options. Until the button is interacted with, its container is not visible.

Link copied to clipboard
@Composable
fun Button.Primary(onClick: () -> Unit, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false, content: @Composable RowScope.() -> Unit)
@Composable
fun Button.Primary(onClick: () -> Unit, text: String, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false)

Used once per view (not including a modal dialog), these buttons have the most emphasis. It should never be doubled up to sit side by side. Used when an action is clearly more important than others and you need to draw attention to it.

Link copied to clipboard
@Composable
fun Button.Secondary(onClick: () -> Unit, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false, content: @Composable RowScope.() -> Unit)
@Composable
fun Button.Secondary(onClick: () -> Unit, text: String, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false)

The standard button for most use cases. The filled styling places less emphasis than Primary but still signals an important action.

Link copied to clipboard
@Composable
fun Button.Success(onClick: () -> Unit, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false, content: @Composable RowScope.() -> Unit)
@Composable
fun Button.Success(onClick: () -> Unit, text: String, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false)

Used for positive confirmations like "Approve" or "Mark as sold" where the outcome is beneficial.

Link copied to clipboard
@Composable
fun Button.Tertiary(onClick: () -> Unit, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false, content: @Composable RowScope.() -> Unit)
@Composable
fun Button.Tertiary(onClick: () -> Unit, text: String, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false)

Used for miscellaneous actions: the action is important, but may not be what the user is looking to do right then. Often paired with a Primary or Secondary button.

Link copied to clipboard
@Composable
fun Button.Text(onClick: () -> Unit, text: String, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false)

Used for the most minor actions. Often paired with a Primary button. Can be used with Secondary and Tertiary buttons when the primary action is for forwarding.

Link copied to clipboard
@Composable
fun Button.Underlined(onClick: () -> Unit, text: String, modifier: Modifier = Modifier, size: ButtonSize = ButtonSize.Medium, enabled: Boolean = true, icon: SparkIcon? = null, iconSide: IconSide = IconSide.START, isLoading: Boolean = false, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, atEnd: Boolean = false)

Used for link-style actions within body text, such as "Terms and conditions" or "Privacy policy".

Generated by Dokka
© 2026 Adevinta