OudsFilterChip
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 filter chip is a compact UI element used in a design system to represent a filter option that can be selected or deselected by the user. Filter chips allow users to refine content or data by applying one or more filters in a visually accessible and interactive way.
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 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.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
}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 filter chip is a compact UI element used in a design system to represent a filter option that can be selected or deselected by the user. Filter chips allow users to refine content or data by applying one or more filters in a visually accessible and interactive way.
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
}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 filter chip is a compact UI element used in a design system to represent a filter option that can be selected or deselected by the user. Filter chips allow users to refine content or data by applying one or more filters in a visually accessible and interactive way.
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 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.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
}