Class Chip

A compact element that represents an input, attribute, or action.

Inheritance
object
CallbackEventHandler
Focusable
VisualElement
BaseVisualElement
Chip
Implements
Inherited Members
VisualElement.Focus()
VisualElement.Overlaps(Rect)
VisualElement.ToString()
VisualElement.TryGetBinding(BindingId, out Binding)
VisualElement.TryGetDataSourceContext(BindingId, out DataSourceContext)
VisualElement.TryGetLastBindingToUIResult(in BindingId, out BindingResult)
VisualElement.TryGetLastBindingToSourceResult(in BindingId, out BindingResult)
VisualElement.GetFirstOfType<T>()
VisualElement.GetFirstAncestorOfType<T>()
VisualElement.canGrabFocus
VisualElement.focusController
VisualElement.cacheAsBitmap
CallbackEventHandler.RegisterCallback<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.RegisterCallbackOnce<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.RegisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, TrickleDown)
CallbackEventHandler.RegisterCallbackOnce<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, TrickleDown)
CallbackEventHandler.RegisterCallback<TEventType>(EventCallback<TEventType>, CallbackOptions)
CallbackEventHandler.RegisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TUserArgsType, CallbackOptions)
CallbackEventHandler.UnregisterCallback<TEventType>(EventCallback<TEventType>, TrickleDown)
CallbackEventHandler.UnregisterCallback<TEventType>(EventCallback<TEventType>, CallbackOptions)
CallbackEventHandler.UnregisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, TrickleDown)
CallbackEventHandler.UnregisterCallback<TEventType, TUserArgsType>(EventCallback<TEventType, TUserArgsType>, CallbackOptions)
CallbackEventHandler.NotifyPropertyChanged(in BindingId)
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class Chip : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolder, IPressable
Remarks

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

Chips can be used for various purposes including:

  • Filtering content or search results
  • Entering data or tags
  • Making selections from a set of options
  • Triggering actions

Tip: The Chip component supports two visual variants (Filled and Outlined), can include an ornament (like an icon or avatar), and optionally provides delete functionality.

Examples

Basic Usage — Creating a simple chip with just a label.

<Chip label="Basic Chip" />

Interactive Chip with Events — Creating an interactive chip with click and delete events.

var chip = new Chip { label = "Click Me" };
chip.clicked += () => Debug.Log("Chip clicked!");
chip.deleted += () => Debug.Log("Chip deleted!");

Filter Chips Example — Creating a group of filter chips.

<Group>
    <Chip variant="Outlined" label="Filter 1" deletable="true" />
    <Chip variant="Outlined" label="Filter 2" deletable="true" />
    <Chip variant="Outlined" label="Filter 3" deletable="true" />
</Group>

Chip with Custom Styling — Customizing chip colors using custom properties.

var chip = new Chip { label = "Custom Style" };
chip.style.SetCustomProperty("--chip-color", new Color(1, 0, 0, 1));
chip.style.SetCustomProperty("--chip-background-color", new Color(0, 0, 1, 0.1f));

Constructors

Chip()

Default constructor.

Declaration
public Chip()

Fields

clickableUssClassName

The Chip Clickable variant styling class.

Declaration
public const string clickableUssClassName = "appui-chip--clickable"
Field Value
Type Description
string

deletableUssClassName

The Chip Deletable variant styling class.

Declaration
public const string deletableUssClassName = "appui-chip--deletable"
Field Value
Type Description
string

deleteButtonUssClassName

The Chip delete Button styling class.

Declaration
public const string deleteButtonUssClassName = "appui-chip__delete-button"
Field Value
Type Description
string

deleteIconUssClassName

The Chip delete Icon styling class.

Declaration
public const string deleteIconUssClassName = "appui-chip__delete-icon"
Field Value
Type Description
string

labelUssClassName

The Chip label styling class.

Declaration
public const string labelUssClassName = "appui-chip__label"
Field Value
Type Description
string

ornamentContainerUssClassName

The Chip ornament container styling class.

Declaration
public const string ornamentContainerUssClassName = "appui-chip__ornament-container"
Field Value
Type Description
string

ussClassName

The Chip main styling class.

Declaration
public const string ussClassName = "appui-chip"
Field Value
Type Description
string

variantUssClassName

The Chip variant styling class.

Declaration
public const string variantUssClassName = "appui-chip--"
Field Value
Type Description
string

withOrnamentUssClassName

The Chip with ornament variant styling class.

Declaration
public const string withOrnamentUssClassName = "appui-chip--with-ornament"
Field Value
Type Description
string

Properties

clickable

Clickable Manipulator for this Chip.

Declaration
[CreateProperty]
public Pressable clickable { get; set; }
Property Value
Type Description
Pressable

contentContainer

The content container of the Chip. This is the ornament container.

Declaration
public override VisualElement contentContainer { get; }
Property Value
Type Description
VisualElement
Overrides

deletable

Set the Chip as deletable.

Declaration
[CreateProperty]
[UxmlAttribute]
public bool deletable { get; set; }
Property Value
Type Description
bool

delete

Deletion Manipulator for this Chip.

Declaration
[CreateProperty]
public Pressable delete { get; set; }
Property Value
Type Description
Pressable

deleteIcon

The icon name for the delete button.

Declaration
[CreateProperty]
[UxmlAttribute]
public string deleteIcon { get; set; }
Property Value
Type Description
string

label

The Chip label.

Declaration
[CreateProperty]
[UxmlAttribute]
public string label { get; set; }
Property Value
Type Description
string

ornament

The Chip ornament.

Declaration
[CreateProperty]
public VisualElement ornament { get; set; }
Property Value
Type Description
VisualElement

variant

The Chip variant.

Declaration
[CreateProperty]
[UxmlAttribute]
public Chip.Variant variant { get; set; }
Property Value
Type Description
Chip.Variant

Methods

GetVariantUssClassName(Variant)

Declaration
public static string GetVariantUssClassName(Chip.Variant enumValue)
Parameters
Type Name Description
Chip.Variant enumValue
Returns
Type Description
string

Implements

Extension Methods