Button

ic.Button is a clickable control that fires a Clicked event when pressed. You can configure its color, shape, and size to match the context it sits in, and optionally add an icon through a child ic.Icon or ic.Image.

Variants and fill styles

Variant and Fill work together to control how prominent the button looks. Use primary for the main action in a group, secondary for supporting actions, and destructive when the operation is irreversible or dangerous. The fill controls how much visual weight the variant color carries: solid for full emphasis, outline for a lighter presence, and ghost when you want the button to blend into the background until the user hovers over it.

Shapes and sizes

Shape and Size let you tune the button’s geometry. The default shape has a subtle corner rounding, pill makes it fully rounded (useful for floating actions or tags), and square removes rounding entirely for toolbar-style layouts. Size scales everything proportionally, so pick the one that fits the surrounding text and spacing.

Icons

You can add an icon next to the label by inserting a child ic.Icon or ic.Image, and IconPosition controls which side it appears on. If you leave the label empty, the button collapses into a compact icon-only square, which is handy for toolbars or tight layouts.

Events

Button fires a Clicked event each time the user presses it, carrying a timestamp in the payload. In MATLAB, attach a listener with addlistener and read the value from evt.Data.

Custom styling

Every component exposes a .css property that lets you inject instance-level CSS directly from MATLAB. You can tweak individual aspects or completely override the built-in look of a component right from your figure code.

Here is a gradient-filled button as an example. The css.style method targets the inner button element and overrides its background, border, and shadow.

btn = ic.Button("Label", "Gradient", "Size", "lg", "Shape", "pill");
btn.Icon = ic.Icon("Source", "heart");

btn.css.style("button", ...
    "background", "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", ...
    "border_color", "transparent", ...
    "color", "#fff", ...
    "box_shadow", "0 4px 15px rgba(102, 126, 234, 0.4)");

Or here a frosted-glass button that uses backdrop-filter to blur whatever sits behind it.

btn = ic.Button("Label", "Frosted", "Size", "lg", "Shape", "pill");
btn.Icon = ic.Icon("Source", "send");

btn.css.style("button", ...
    "background", "rgba(255, 255, 255, 0.15)", ...
    "backdrop_filter", "blur(12px)", ...
    "border", "1px solid rgba(255, 255, 255, 0.3)", ...
    "color", "#fff", ...
    "box_shadow", "0 4px 20px rgba(99, 102, 241, 0.4)");