IconButton¶

IconButton is a round button that shows only an icon. Use it for toolbar actions where a text label would take up too much room.

Usage¶

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

C.IconButton(scope, {
    Name = "settings", -- (1)!
    Variant = "Tonal",
    OnClick = function()
        print("Open settings")
    end,
})

Name is the name of a Lucide icon. To use your own image, set Image instead.

Name	Type	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.
`Name`	`string`	-	Name of a Lucide icon.
`Image`	`string`	-	Asset ID of an image to use instead of a Lucide icon.
`Disabled`	`UsedAs<boolean>`	`false`	Stops the button reacting to input and dims it. The component reads this once, when it creates the button.
`Variant`	`string`	`"Text"`	Style of the button. It takes the same values as Button.
`Color`	`UsedAs<ColorInput>`	-	Colour of the button. It takes the same values as Button.

Name	Description
`OnClick: () -> ()`	Runs when the user activates the button. It does not run while `Disabled` is `true`.