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

Hyperlink

@Composable
fun Hyperlink(text: String, active: Boolean, modifier: Modifier = Modifier, style: TextStyle = LocalTextStyle.current, color: HyperlinkColor = HyperlinkColor.Default, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

Hyperlink A text component that is able to handle click event on the text.

Parameters

text

The label to be displayed.

modifier

Modifier to apply to this layout node.

style

Style configuration for the text such as color, font, line height etc.

color

HyperlinkColor different set of colors for the text

active

either if the link has been activated or not

interactionSource

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.

onClick

Callback that is executed when users click the text. This callback is called with clicked character's offset. The active param should be set as true if the action succeeds

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.ClickableText
import androidx.compose.material3.LocalTextStyle
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Checkbox
import net.ikea.skapa.ui.components.Hyperlink
import net.ikea.skapa.ui.components.HyperlinkColor
import net.ikea.skapa.ui.components.hyperlinkStyle

fun main() { 
   //sampleStart 
   var active by remember { mutableStateOf(false) }
var checked by remember { mutableStateOf(false) }
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Row(horizontalArrangement = Arrangement.spacedBy(SkapaSpacing.space100)) {
        Checkbox(
            checked = checked,
            onCheckedChange = { checked = !checked }
        )
        Hyperlink(
            text = "I have read the terms and conditions",
            active = active,
            onClick = {
                // Do something and set hyperlink as active
                active = true
            }
        )
    }
} 
   //sampleEnd
}