OudsLink
Links are interactive elements that allow users to navigate to a new screen, website, or a specific section within the current screen.
Note that in the case 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.1.0 |
Parameters
Label describing what is being linked to.
Callback invoked when the link is clicked.
Modifier applied to the link.
Size of the link. See OudsLink.Size for available sizes.
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.utilities.OudsPreview
fun main() {
//sampleStart
OudsLink(
label = "Link",
onClick = { /* Do something! */ },
)
//sampleEnd
}Links are interactive elements that allow users to navigate to a new screen, website, or a specific section within the current screen.
Note that in the case 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.1.0 |
Parameters
Label describing what is being linked to.
Icon displayed in the link that can be used to indicate the destination or type of content being referenced.
Callback invoked when the link is clicked.
Modifier applied to the link.
Size of the link. See OudsLink.Size for available sizes.
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.utilities.OudsPreview
fun main() {
//sampleStart
OudsLink(
label = "Link",
icon = OudsLink.Icon(imageVector = Icons.Filled.FavoriteBorder),
onClick = { /* Do something! */ },
)
//sampleEnd
}An OUDS link which displays an arrow before (OudsLink.Arrow.Back) or after (OudsLink.Arrow.Next) a label.
In the case 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.1.0 |
Parameters
Label describing what is being linked to.
Navigation arrow displayed in the link. See OudsLink.Arrow for allowed values.
Callback invoked when the link is clicked.
Modifier applied to the link.
Size of the link. See OudsLink.Size for available sizes.
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.utilities.OudsPreview
fun main() {
//sampleStart
OudsLink(
label = "Link",
arrow = OudsLink.Arrow.Next,
onClick = { /* Do something! */ },
)
//sampleEnd
}