OudsSuggestionChip
Chips help people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts.
A suggestion chip is a compact UI element used to present recommended or predictive options based on user input or context. Often found in search bars, forms, or messaging interfaces, suggestion chips help users quickly select from relevant suggestions. They are typically non-selected by default and can be tapped or clicked to apply the suggestion, streamlining user input and enhancing usability.
This version of the suggestion chip uses the text only layout which displays only text, offering a clean and minimalistic look. Best suited for category-based filters that do not require additional visual elements. Other layouts are available for this component: text + icon and icon only.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.3.0 |
Parameters
Called when this chip is clicked.
Text label for this chip.
The Modifier to be applied to this chip.
Controls the enabled state of this chip. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
an optional hoisted MutableInteractionSource for observing and emitting Interactions for this chip. You can use this to change the chip's appearance or preview the chip in different states. Note that if null is provided, interactions will still happen internally.
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.Preview
import com.orange.ouds.core.component.OudsChipIcon
import com.orange.ouds.core.component.OudsSuggestionChip
import com.orange.ouds.core.utilities.OudsPreview
fun main() {
//sampleStart
OudsSuggestionChip(
onClick = { /* Do something! */ },
label = "Label"
)
//sampleEnd
}Chips help people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts.
A suggestion chip is a compact UI element used to present recommended or predictive options based on user input or context. Often found in search bars, forms, or messaging interfaces, suggestion chips help users quickly select from relevant suggestions. They are typically non-selected by default and can be tapped or clicked to apply the suggestion, streamlining user input and enhancing usability.
This version of the chip uses the icon only layout which uses only an icon, making it a compact option for limited space. Works well with universally recognized symbols, such as a heart for favorites or a checkmark for selection. Other layouts are available for this component: text only and text + icon.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.3.0 |
Parameters
Called when this chip is clicked.
Icon displayed in the chip. Use an icon to add additional affordance where the icon has a clear and well-established meaning.
The Modifier to be applied to this chip.
Controls the enabled state of this chip. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
an optional hoisted MutableInteractionSource for observing and emitting Interactions for this chip. You can use this to change the chip's appearance or preview the chip in different states. Note that if null is provided, interactions will still happen internally.
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.Preview
import com.orange.ouds.core.component.OudsChipIcon
import com.orange.ouds.core.component.OudsSuggestionChip
import com.orange.ouds.core.utilities.OudsPreview
fun main() {
//sampleStart
OudsSuggestionChip(
onClick = { /* Do something! */ },
icon = OudsChipIcon(
imageVector = Icons.Filled.FavoriteBorder,
contentDescription = "Content description"
)
)
//sampleEnd
}Chips help people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts.
A suggestion chip is a compact UI element used to present recommended or predictive options based on user input or context. Often found in search bars, forms, or messaging interfaces, suggestion chips help users quickly select from relevant suggestions. They are typically non-selected by default and can be tapped or clicked to apply the suggestion, streamlining user input and enhancing usability.
This version of the chip uses the text + icon layout which combines text with an icon to enhance clarity and recognition. Ideal when a visual cue helps reinforce the filter’s meaning. Other layouts are available for this component: text only and icon only.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.3.0 |
Parameters
Called when this chip is clicked.
Text label for this chip.
Icon displayed in the chip. Use an icon to add additional affordance where the icon has a clear and well-established meaning.
The Modifier to be applied to this chip.
Controls the enabled state of this chip. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
an optional hoisted MutableInteractionSource for observing and emitting Interactions for this chip. You can use this to change the chip's appearance or preview the chip in different states. Note that if null is provided, interactions will still happen internally.
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.Preview
import com.orange.ouds.core.component.OudsChipIcon
import com.orange.ouds.core.component.OudsSuggestionChip
import com.orange.ouds.core.utilities.OudsPreview
fun main() {
//sampleStart
OudsSuggestionChip(
onClick = { /* Do something! */ },
label = "Label",
icon = OudsChipIcon(
imageVector = Icons.Filled.FavoriteBorder,
contentDescription = ""
)
)
//sampleEnd
}