Label

ic.Label is a text display component for showing static or dynamic text content in your figures. It covers the common typography needs you run into when building UIs: headings, body text, captions, inline code, and uppercase overlines. You control the size, weight, color, and alignment to fit the label into whatever layout context you need.

Variants

Variant controls the typographic character of the label, not its size (that is what Size is for). body is the neutral baseline. heading adds weight and tighter line height, so it reads as a title when you pair it with a larger size. caption uses slightly tighter spacing for metadata and secondary descriptions. code adds a subtle monospace background for inline code snippets, and overline renders uppercased, tracked-out text for category labels or group headings.

Size and weight

Size scales the font from xs (0.625rem) up to 3xl (2rem), and Weight controls the thickness independently. These two properties work together, so you can have a large but light label or a small but bold one. The size scale uses relative units, which means the label respects the base font size of its container.

Color and alignment

Color maps to the theme’s semantic color tokens, so labels stay consistent with the rest of your figure’s palette. Use muted for secondary information that should not compete with the primary content, primary to call attention to something, destructive for warnings or errors, and success or warning for status indicators. Align controls the horizontal text alignment within the label’s container.

Truncation and selection

When a label sits in a tight space, Truncate clips the overflow and adds an ellipsis so the layout does not break. By default, label text is selectable (users can highlight and copy it), but you can disable that with Selectable set to false if the text is purely decorative or if selection would interfere with other interactions.

Custom styling

Every component exposes a .css property for instance-level CSS overrides from MATLAB. Here, a gradient text effect with a bold underline accent is displayed. The background-clip: text trick turns a linear-gradient background into a text fill color. The css.style method targets the inner span element.

lbl = ic.Label("Text", "Electric Violet", ...
    "Variant", "heading", "Size", "2xl", ...
    "Weight", "bold");

lbl.css.style("span", ...
    "background", "linear-gradient(135deg, #6366f1, #ec4899)", ...
    "background_clip", "text", ...
    "-webkit-background-clip", "text", ...
    "-webkit-text-fill-color", "transparent", ...
    "padding", "4px 0", ...
    "border_bottom", "3px solid #6366f1", ...
    "display", "inline");