core/com.orange.ouds.core.component/OudsLink

OudsLink

fun OudsLink(label: String, onClick: () -> Unit, modifier: Modifier = Modifier, size: OudsLinkSize = OudsLinkDefaults.Size, enabled: Boolean = true)

Link is a UI element that allows to navigate from one location to another, either within the same page or across different pages in the same resource, or to an external resource. Link's primary function is navigation and it communicates its interactive nature visually and semantically.

Note that if it is placed in an OudsColoredBox, its monochrome variant is automatically displayed. The tokens associated with this variant can be customized by overriding OudsLinkMonoTokens.

Design

Guidelines	unified-design-system.orange.com
Version	2.2.0

Parameters

label

Label describing what is being linked to.

onClick

Callback invoked when the link is clicked.

modifier

Modifier applied to the link.

size

Size of the link. See OudsLinkSize for available sizes.

enabled

Controls the enabled state of the link. When false, the link will not be clickable.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsLink
import com.orange.ouds.core.component.OudsLinkChevron
import com.orange.ouds.core.component.OudsLinkIcon
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsLink(
    label = "Link",
    onClick = { /* Do something! */ },
) 
   //sampleEnd
}

@Composable

fun OudsLink(label: String, icon: OudsLinkIcon, onClick: () -> Unit, modifier: Modifier = Modifier, size: OudsLinkSize = OudsLinkDefaults.Size, enabled: Boolean = true)

Note that if it is placed in an OudsColoredBox, its monochrome variant is automatically displayed. The tokens associated with this variant can be customized by overriding OudsLinkMonoTokens.

Design

Guidelines	unified-design-system.orange.com
Version	2.2.0

Parameters

label

Label describing what is being linked to.

icon

Icon displayed in the link that can be used to indicate the destination or type of content being referenced.

onClick

Callback invoked when the link is clicked.

modifier

Modifier applied to the link.

size

Size of the link. See OudsLinkSize for available sizes.

enabled

Controls the enabled state of the link. When false, the link will not be clickable.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsLink
import com.orange.ouds.core.component.OudsLinkChevron
import com.orange.ouds.core.component.OudsLinkIcon
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsLink(
    label = "Link",
    icon = OudsLinkIcon(imageVector = Icons.Filled.FavoriteBorder),
    onClick = { /* Do something! */ },
) 
   //sampleEnd
}

@Composable

fun OudsLink(label: String, chevron: OudsLinkChevron, onClick: () -> Unit, modifier: Modifier = Modifier, size: OudsLinkSize = OudsLinkDefaults.Size, enabled: Boolean = true)

This version of the link displays a chevron before (OudsLinkChevron.Back) or after (OudsLinkChevron.Next) a label.

If it is used in an OudsColoredBox, its monochrome variant is automatically displayed. The tokens associated with this variant can be customized by overriding OudsLinkMonoTokens.

Design

Guidelines	unified-design-system.orange.com
Version	2.2.0

Parameters

label

Label describing what is being linked to.

chevron

Navigation chevron displayed in the link. See OudsLinkChevron for allowed values.

onClick

Callback invoked when the link is clicked.

modifier

Modifier applied to the link.

size

Size of the link. See OudsLinkSize for available sizes.

enabled

Controls the enabled state of the link. When false, the link will not be clickable.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsLink
import com.orange.ouds.core.component.OudsLinkChevron
import com.orange.ouds.core.component.OudsLinkIcon
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsLink(
    label = "Link",
    chevron = OudsLinkChevron.Next,
    onClick = { /* Do something! */ },
) 
   //sampleEnd
}