OudsFilterChip
Filter chip is a UI element that allows to select or deselect an option within a series, and is commonly used to capture filtering decisions. Filter chip allows to filter content by being selected or deselected. It can be toggled "On" or "Off" to refine displayed results, and selected Filter Chips remain visually distinct to indicate active filters.
This version of the filter 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
Whether this chip is selected or not.
Called when this chip is clicked.
Text label displayed in the 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.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsChipIcon
import com.orange.ouds.core.component.OudsFilterChip
import com.orange.ouds.core.utilities.OudsPreview
fun main() {
//sampleStart
var selected by remember { mutableStateOf(false) }
OudsFilterChip(
selected = selected,
onClick = { selected = !selected },
label = "Label"
)
//sampleEnd
}Filter chip is a UI element that allows to select or deselect an option within a series, and is commonly used to capture filtering decisions. Filter chip allows to filter content by being selected or deselected. It can be toggled "On" or "Off" to refine displayed results, and selected Filter Chips remain visually distinct to indicate active filters.
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
Whether this chip is selected or not.
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.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsChipIcon
import com.orange.ouds.core.component.OudsFilterChip
import com.orange.ouds.core.utilities.OudsPreview
fun main() {
//sampleStart
var selected by remember { mutableStateOf(false) }
OudsFilterChip(
selected = selected,
onClick = { selected = !selected },
icon = OudsChipIcon(
imageVector = Icons.Filled.FavoriteBorder,
contentDescription = "Content description"
)
)
//sampleEnd
}Filter chip is a UI element that allows to select or deselect an option within a series, and is commonly used to capture filtering decisions. Filter chip allows to filter content by being selected or deselected. It can be toggled "On" or "Off" to refine displayed results, and selected Filter Chips remain visually distinct to indicate active filters.
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
Whether this chip is selected or not.
Called when this chip is clicked.
Text label displayed in the 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.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsChipIcon
import com.orange.ouds.core.component.OudsFilterChip
import com.orange.ouds.core.utilities.OudsPreview
fun main() {
//sampleStart
var selected by remember { mutableStateOf(false) }
OudsFilterChip(
selected = selected,
onClick = { selected = !selected },
label = "Label",
icon = OudsChipIcon(
imageVector = Icons.Filled.FavoriteBorder,
contentDescription = ""
)
)
//sampleEnd
}