OudsLabelText
Label styles are intended for compact interface elements such as buttons, form fields, badges, and other small components. Unlike other typography categories, they are not responsive and maintain a fixed size across all breakpoints. This ensures visual consistency and predictable behavior within space-constrained UI elements. Labels should be preferred whenever content is displayed within small components.
An overload accepting annotated string is available for rich text formatting.
Design
| Name | Label |
| Version | 1.0.0 |
Parameters
Text to be displayed.
Modifier applied to the label text.
Size of the label text.
Weight of the label text.
Color of the label text.
Alignment of the text within the lines of the paragraph. See TextStyle.textAlign.
Line height for the Paragraph in TextUnit unit, e.g. SP or EM. See TextStyle.lineHeight.
How visual overflow should be handled.
Callback that is executed when a new text layout is calculated. A TextLayoutResult object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.
Samples
OudsLabelText(
modifier = Modifier.padding(OudsTheme.spaces.fixed.small),
text = "Label",
size = OudsLabelTextSize.Large,
weight = OudsTextWeight.Strong
)Label styles are intended for compact interface elements such as buttons, form fields, badges, and other small components. Unlike other typography categories, they are not responsive and maintain a fixed size across all breakpoints. This ensures visual consistency and predictable behavior within space-constrained UI elements. Labels should be preferred whenever content is displayed within small components.
An overload accepting plain text is available for simple text without formatting.
Design
| Name | Label |
| Version | 1.0.0 |
Parameters
Text to be displayed. Note: Use rich text in compliance with guidelines and accessibility criteria.
Modifier applied to the label text.
Size of the label text.
Weight of the label text.
Color of the label text.
Alignment of the text within the lines of the paragraph. See TextStyle.textAlign.
Line height for the Paragraph in TextUnit unit, e.g. SP or EM. See TextStyle.lineHeight.
How visual overflow should be handled.
Callback that is executed when a new text layout is calculated. A TextLayoutResult object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.
Samples
OudsLabelText(
modifier = Modifier.padding(OudsTheme.spaces.fixed.small),
text = buildAnnotatedString {
append("Label with ")
withStyle(SpanStyle(color = OudsTheme.colorScheme.content.brandPrimary)) { append("colored text") }
append(" and ")
withStyle(SpanStyle(fontWeight = FontWeight.Bold)) { append("bold text") }
},
size = OudsLabelTextSize.Large
)