Chip

Chip is a small pill for a filter, a tag or a choice. A selected chip is filled in.

Usage

Call Components.Chip with a scope and a table of properties:

local selected = scope:Value(false)

C.Chip(scope, {
    Text = "Pinned",
    Selected = selected,
    LeadingIcon = "pin",
    OnClick = function()
        selected:set(not peek(selected))
    end,
})

Properties

Name	Type	Required	Default	Description
Theme	ThemeRef		The contextual theme	Theme to use for this component instead of the one from Theme.Provide.
LayoutOrder	UsedAs<number>		0	Position in a parent UIListLayout or UIGridLayout.
Size	UsedAs<UDim2>		-	Size of the component.
Visible	UsedAs<boolean>		true	Whether the component is shown.
ZIndex	UsedAs<number>		-	Z index of the component.
Text	UsedAs<string>		-	Label of the chip.
Selected	UsedAs<boolean>		false	Whether the chip is filled in. The component reads this once, when it creates the chip.
Disabled	UsedAs<boolean>		false	Stops the chip reacting to input.
LeadingIcon	string		-	Lucide icon shown before the label.
TrailingIcon	string		-	Lucide icon shown after the label.

Callbacks

Name	Description
OnClick: () -> ()	Runs when the user activates the chip.

See also

• SegmentedControl
• ChoiceGroup