Struct MaterialChip 

pub struct MaterialChip<'a> { /* private fields */ }

Material Design chip component following Material Design 3 specifications

Chips are compact elements that represent an input, attribute, or action. They allow users to enter information, make selections, filter content, or trigger actions.

Usage Examples

// Assist chip - helps users with contextual actions
if ui.add(MaterialChip::assist("Settings")).clicked() {
    // Open settings
}

// Filter chip - for filtering content
let mut filter_active = false;
ui.add(MaterialChip::filter("Photos")
    .selected(&mut filter_active));

// Input chip - represents entered data
ui.add(MaterialChip::input("john@example.com")
    .removable(true));

// Suggestion chip - suggests actions or content
ui.add(MaterialChip::suggestion("Try this feature"));

Material Design Spec

• Height: 32dp
• Corner radius: 8dp
• Text: Label Large (14sp/500 weight)
• Touch target: Minimum 48x48dp

Implementations

impl<'a> MaterialChip<'a>

pub fn new(text: impl Into<String>, variant: ChipVariant) -> Self

Create a new chip with specified text and variant

Parameters

• text: Text to display on the chip
• variant: Type of chip (Assist, Filter, Input, Suggestion)

pub fn assist(text: impl Into<String>) -> Self

Create an assist chip for contextual actions

Assist chips help users take actions or get information about their current context. They should appear dynamically and contextually in the UI.

Material Design Usage

• Display contextually relevant actions
• Usually triggered by user actions or context changes
• Should not be persistent in the interface

pub fn filter(text: impl Into<String>, selected: &'a mut bool) -> Self

Create a filter chip for content filtering

Filter chips are used for filtering content and are typically displayed in a set. They can be selected/deselected to refine displayed content.

Parameters

• text: Label for the filter option
• selected: Mutable reference to selection state

Material Design Usage

• Group related filter options together
• Allow multiple selections for broad filtering
• Provide clear visual feedback for selected state

pub fn input(text: impl Into<String>) -> Self

Create an input chip representing user-entered data

Input chips represent discrete pieces of information entered by a user, such as tags, contacts, or other structured data.

Material Design Usage

• Represent complex entities in a compact form
• Often removable to allow editing of input data
• Used in forms and data entry interfaces

pub fn suggestion(text: impl Into<String>) -> Self

Create a suggestion chip that provides actionable content suggestions

Suggestion chips are used to help users discover relevant actions or content. They can be used in conjunction with dynamic features like autocomplete or content recommendations.

pub fn elevated(self, elevated: bool) -> Self

Set whether the chip should have elevation (shadow) effect

Elevated chips have a surface-container-high background and a shadow to indicate elevation. This is typically used for assist and suggestion chips.

pub fn enabled(self, enabled: bool) -> Self

Enable or disable the chip

Disabled chips have a different visual treatment and do not respond to user interactions. Soft-disabled chips are still visible but appear with reduced opacity.

pub fn soft_disabled(self, soft_disabled: bool) -> Self

Set the chip as soft-disabled

Soft-disabled chips have a different visual treatment (e.g., lighter opacity) compared to hard-disabled chips. They are still interactive but indicate that the action is unavailable.

pub fn removable(self, removable: bool) -> Self

Set whether the chip can be removed

Removable chips show an X icon that allows users to remove the chip from the UI. This is useful for input and filter chips.

pub fn leading_icon(self, icon: impl Into<String>) -> Self

Set a leading icon for the chip using a Material icon name

The icon will be displayed on the left side of the chip’s text. This is commonly used for assist and filter chips.

pub fn leading_icon_svg(self, svg_data: impl Into<String>) -> Self

Set a leading icon for the chip using SVG data

The SVG data will be converted to a texture and displayed on the left side of the chip’s text. This allows for custom icons with scalable vector graphics.

pub fn leading_icon_png(self, png_bytes: Vec<u8>) -> Self

Set a leading icon for the chip using PNG image data

The PNG image data will be converted to a texture and displayed on the left side of the chip’s text. This is useful for using raster images as icons.

pub fn leading_icon_texture(self, texture: TextureHandle) -> Self

Set a pre-loaded texture as the leading icon for the chip

This allows using any texture as an icon, without the need to convert from image data. The texture should be created and managed externally.

pub fn avatar(self, avatar: bool) -> Self

Set whether to use avatar-style rounded appearance for the chip

Avatar-style chips have a more pronounced roundness, making them suitable for representing users or profile-related content. Regular chips are more rectangular.

pub fn on_click<F>(self, f: F) -> Self

where F: Fn() + 'a,

Set a callback function to be called when the chip is clicked

This allows defining custom actions for each chip, such as navigating to a different view, opening a dialog, or triggering any other behavior.

Trait Implementations

impl<'a> Widget for MaterialChip<'a>

fn ui(self, ui: &mut Ui) -> Response

Allocate space, interact, paint, and return a Response.