Button - Button UI component - MATLAB (original) (raw)

Description

A button UI component responds when an app user presses it. Use the Button object to modify the appearance and behavior of a button after you create it.

Creation

Create a button in an app using the uibutton function.

Properties

expand all

Button

Button label, specified as a character vector, cell array of character vectors, string scalar, string array, or 1-D categorical array. Specify a character vector or string scalar to label the button with a single line of text. Use a cell array or string array to label the button with multiple lines of text. Each element in the array represents a separate line of text. If you specify this property as a categorical array, MATLAB® uses the values in the array, not the full set of categories.

Button text interpreter, specified as:

TeX Markup

Use TeX markup to add superscripts and subscripts and to include special characters in the text.

Modifiers remain in effect until the end of the text. Superscripts and subscripts are an exception because they modify only the next character or the characters within the curly braces. When you set the interpreter to "tex", the supported modifiers are as follows.

Modifier Description Example
^{ } Superscript "text^{superscript}"
_{ } Subscript "text_{subscript}"
\bf Bold font "\bf text"
\it Italic font "\it text"
\sl Oblique font (usually the same as italic font) "\sl text"
\rm Normal font "\rm text"
\fontname{specifier} Font name — Replace_specifier_ with the name of a font family. You can use this in combination with other modifiers. "\fontname{Courier} text"
\fontsize{specifier} Font size —Replace_specifier_ with a numeric scalar value in point units. "\fontsize{15} text"
\color{specifier} Font color — Replace_specifier_ with one of these colors: red, green,yellow, magenta,blue, black,white, gray,darkGreen, orange, orlightBlue. "\color{magenta} text"
\color[rgb]{specifier} Custom font color — Replace_specifier_ with a three-element RGB triplet. "\color[rgb]{0,0.5,0.5} text"

This table lists the supported special characters for the"tex" interpreter.

Character Sequence Symbol Character Sequence Symbol Character Sequence Symbol
\alpha α \upsilon υ \sim ~
\angle ∠ \phi ϕ \leq ≤
\ast * \chi χ \infty ∞
\beta β \psi ψ \clubsuit ♣
\gamma γ \omega ω \diamondsuit ♦
\delta δ \Gamma Γ \heartsuit ♥
\epsilon ϵ \Delta Δ \spadesuit ♠
\zeta ζ \Theta Θ \leftrightarrow ↔
\eta η \Lambda Λ \leftarrow ←
\theta θ \Xi Ξ \Leftarrow ⇐
\vartheta ϑ \Pi Π \uparrow ↑
\iota ι \Sigma Σ \rightarrow →
\kappa κ \Upsilon ϒ \Rightarrow ⇒
\lambda λ \Phi Φ \downarrow ↓
\mu µ \Psi Ψ \circ º
\nu ν \Omega Ω \pm ±
\xi ξ \forall ∀ \geq ≥
\pi π \exists ∃ \propto ∝
\rho ρ \ni ∍ \partial ∂
\sigma σ \cong ≅ \bullet •
\varsigma ς \approx ≈ \div ÷
\tau τ \Re ℜ \neq ≠
\equiv ≡ \oplus ⊕ \aleph ℵ
\Im ℑ \cup ∪ \wp ℘
\otimes ⊗ \subseteq ⊆ \oslash ∅
\cap ∩ \in ∈ \supseteq ⊇
\supset ⊃ \lceil ⌈ \subset ⊂
\int ∫ \cdot · \o ο
\rfloor ⌋ \neg ¬ \nabla ∇
\lfloor ⌊ \times x \ldots ...
\perp ⊥ \surd √ \prime ´
\wedge ∧ \varpi ϖ \0 ∅
\rceil ⌉ \rangle 〉 \mid |
\vee ∨ \langle 〈 \copyright ©

LaTeX Markup

To use LaTeX markup, set the interpreter to 'latex'. Use LaTeX markup to format and display mathematical expressions, equations, and special characters. Use dollar symbols around the marked up text. For example, use'$\int_1^{20} x^2 dx$' for inline mode or'$$\int_1^{20} x^2 dx$$' for display mode.

The displayed text uses the default LaTeX font style. TheFontName, FontWeight, andFontAngle properties do not have an effect. To change the font style, use LaTeX markup.

MATLAB supports most standard LaTeX math mode commands. For more information, see Supported LaTeX Commands.

HTML Markup

To use HTML markup, set the interpreter to 'html'. Setting font styles using HTML overrides any equivalent font properties. For example, this code creates a button with red text.

fig = uifigure; b = uibutton(fig,"Interpreter","html"); b.Text = '

Text

'; b.FontColor = "blue";

The interpreter supports a subset of HTML markup. As a general guideline, the interpreter supports text-related tags and styles. Unsupported tags and styles are ignored.

This table lists the supported elements and element attributes.

HTML Element Attributes Description
a style, target, href, title Hyperlink
abbr style, title Abbreviation or acronym
address style Contact information
article style Self-contained, independent content
aside style Content indirectly related to the main content
b style Bold text
bdi style, dir Content formatted in a different direction from surrounding text
bdo style, dir Content formatted in a different direction from surrounding text
big style Text one font size level larger than surrounding text (obsolete in HTML5)
blockquote style, cite Extended quotation
br n/a Line break
caption style Caption or title of a table
center style Content centered horizontally
cite style Title of a creative work
code style Fragment of code
col style, align, valign, span, width Column within a table
colgroup style, align, valign, span, width Group of columns within a table
dd style Term or value in a description list
del style, datetime Text that was deleted from a document
details style, open Interactive widget with text visible only when toggled to 'open' state
dl style Description list
dt style Term or value in a description list
em style Emphasized text (typically displayed in italic)
font style, color, size, face Text with specified font properties (obsolete in HTML5)
footer style Footer
h1. h2, h3, h4, h5, h6 style Section heading —

is the highest level of heading and

is the lowest
header style Introductory content
hr style Thematic break
i style Text offset from the surrounding content — by default rendered as italic
ins style, datetime Text inserted into a document
li style Item in a list
mark style Marked or highlighted text
ol style Ordered list
p style Paragraph
pre style Preformatted text
s style Text with a strikethrough
strike style Text with a strikethrough (obsolete in HTML5)
section style Standalone section
small style Text one font size level smaller than surrounding text (obsolete in HTML5)
sub style Subscript
sup style Superscript
strong style Text with strong importance
table style, width, border, align, valign Table
tbody style, align, valign Table body
td style, width, rowspan, colspan, align, valign Table data cell
tfoot style, align, valign Set of table rows that summarize the table columns
th style, width, rowspan, colspan, align, valign Table data cell specified as a header of a group of cells
thead style, align, valign Set of table rows that specify the column heads
tr style, rowspan, align, valign Row of table cells
tt style Monospace text (obsolete in HTML5)
u style Text with an unarticulated annotation — by default rendered as an underline
ul style Unordered list

For more information about these elements, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element.

To use HTML markup to create a hyperlink that runs MATLAB code, see Create Hyperlinks that Run Functions.

You can use HTML style attributes to format HTML content. A style attribute is a string of CSS attributes and their values.

These CSS attributes are supported:

For more information about these attributes, see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference.

Word wrapping to fit component width, specified as 'off' or 'on', or as numeric or logical 0 (false) or 1 (true). A value of 'off' is equivalent to false, and 'on' is equivalent to true. Thus, you can use the value of this property as a logical value. The value is stored as an on/off logical value of type matlab.lang.OnOffSwitchState.

Use this property to prevent text from getting clipped horizontally when the width of the component is smaller than the text you want to display.

Setting the WordWrap property to 'on' does not prevent text from getting clipped vertically when the height of the component is too small to display all the lines of text.

Font and Color

Font angle, specified as 'normal' or 'italic'. Not all fonts have an italic font angle. For fonts that do not, specifying'italic' results in the normal font angle.

Background color, specified as an RGB triplet, a hexadecimal color code, or one of the color options listed in the table.

RGB triplets and hexadecimal color codes are useful for specifying custom colors.

Alternatively, you can specify some common colors by name. This table lists the named color options, the equivalent RGB triplets, and hexadecimal color codes.

Color Name Short Name RGB Triplet Hexadecimal Color Code Appearance
"red" "r" [1 0 0] "#FF0000" Sample of the color red
"green" "g" [0 1 0] "#00FF00" Sample of the color green
"blue" "b" [0 0 1] "#0000FF" Sample of the color blue
"cyan" "c" [0 1 1] "#00FFFF" Sample of the color cyan
"magenta" "m" [1 0 1] "#FF00FF" Sample of the color magenta
"yellow" "y" [1 1 0] "#FFFF00" Sample of the color yellow
"black" "k" [0 0 0] "#000000" Sample of the color black
"white" "w" [1 1 1] "#FFFFFF" Sample of the color white

This table lists the default color palettes for plots in the light and dark themes.

Palette Palette Colors
"gem" — Light theme default_Before R2025a: Most plots use these colors by default._ Sample of the "gem" color palette
"glow" — Dark theme default Sample of the "glow" color palette

You can get the RGB triplets and hexadecimal color codes for these palettes using the orderedcolors and rgb2hex functions. For example, get the RGB triplets for the "gem" palette and convert them to hexadecimal color codes.

RGB = orderedcolors("gem"); H = rgb2hex(RGB);

Before R2023b: Get the RGB triplets using RGB = get(groot,"FactoryAxesColorOrder").

Before R2024a: Get the hexadecimal color codes using H = compose("#%02X%02X%02X",round(RGB*255)).

Interactivity

Tooltip, specified as a character vector, cell array of character vectors, string array, or 1-D categorical array. Use this property to display a message when the user hovers the pointer over the component at run time. The tooltip displays even when the component is disabled. To display multiple lines of text, specify a cell array of character vectors or a string array. Each element in the array becomes a separate line of text. If you specify this property as a categorical array, MATLAB uses the values in the array, not the full set of categories.

Context menu, specified as a ContextMenu object created using the uicontextmenu function. Use this property to display a context menu when you right-click on a component.

Position

Location and size of button, specified as a four element vector of the form[left bottom width height]. All measurements are in pixel units. This property value is identical to the Position property.

This property is read-only.

Location and size of button, returned as a four element vector of the form[left bottom width height]. All measurements are in pixel units. This property value is identical to thePosition property.

Horizontal alignment of the icon and text, specified as 'center','left', or 'right'. The horizontal alignment is relative to the area inside the borders of the button. Setting this property when the text spans the full width of the button has no apparent effect in the UI.

Vertical alignment of the icon and the text, specified as 'center','top', or 'bottom'. The vertical alignment is relative to the area inside the borders of the button. Setting this property when the text height fills the height of the button has no apparent effect in the UI.

Location of the button icon, specified as one of the values in the table. The examples in the table show the result of specifying each IconAlignment value for a button with a HorizontalAlignment value of 'center'.

Value Description Example
'left' The icon displays directly to the left of the button text. Button with centered text and a green check mark icon directly to the left of the text
'right' The icon displays directly to the right of the button text. Button with centered text and a green check mark icon directly to the right of the text
'center' The icon displays at the center of the button, behind the text. Button with centered text and a green check mark icon centered behind the text
'leftmargin' The icon displays on the far left of the button, regardless of the text location.This value is equivalent to 'left' when the value of HorizontalAlignment is'left'. Button with centered text and a green check mark icon on the far left side of the button
'rightmargin' The icon displays on the far right of the button, regardless of the text location.This value is equivalent to 'right' when the value of HorizontalAlignment is'right'. Button with centered text and a green check mark icon on the far right side of the button
'top' The icon displays directly above the button text. Button with centered text and a green check mark icon directly above the text
'bottom' The icon displays directly below the button text. Button with centered text and a green check mark icon directly below the text

If the Text property of the button is empty, then the icon location is determined by the HorizontalAlignment andVerticalAlignment properties instead of theIconAlignment property.

Layout options, specified as aGridLayoutOptions object. This property specifies options for components that are children of grid layout containers. If the component is not a child of a grid layout container (for example, it is a child of a figure or panel), then this property is empty and has no effect. However, if the component is a child of a grid layout container, you can place the component in the desired row and column of the grid by setting the Row and Column properties on the GridLayoutOptions object.

For example, this code places a button in the third row and second column of its parent grid.

g = uigridlayout([4 3]); b = uibutton(g); b.Layout.Row = 3; b.Layout.Column = 2;

To make the button span multiple rows or columns, specify theRow or Column property as a two-element vector. For example, this button spans columns 2 through3:

Callbacks

Callback Execution Control

This property is read-only.

Parent/Child

Parent container, specified as a Figure object or one of its child containers: Tab, Panel, ButtonGroup, orGridLayout. If no container is specified, MATLAB calls the uifigure function to create a new Figure object that serves as the parent container.

Identifiers

This property is read-only.

Type of graphics object, returned as 'uibutton'.

Object identifier, specified as a character vector or string scalar. You can specify a unique Tag value to serve as an identifier for an object. When you need access to the object elsewhere in your code, you can use the findobj function to search for the object based on the Tag value.

Object Functions

focus Give focus to UI component

Examples

collapse all

Create an app that plots some data when an app user presses a button.

In a file named plotApp.m, write a function that implements the app:

function plotApp fig = uifigure; g = uigridlayout(fig,[2 3]); g.RowHeight = {'1x','fit'}; g.ColumnWidth = {'1x','fit','1x'};

ax = uiaxes(g); ax.Layout.Row = 1; ax.Layout.Column = [1 3]; b = uibutton(g, ... "Text","Plot Data", ... "ButtonPushedFcn", @(src,event) plotButtonPushed(ax)); b.Layout.Row = 2; b.Layout.Column = 2; end

function plotButtonPushed(ax) x = linspace(0,2*pi,100); y = sin(x); plot(ax,x,y) end

Run the plotApp function. Click the button to plot the data.

UI figure window with axes showing some plotted data and a Plot Data button below the axes

Version History

Introduced in R2016a

expand all

The default FontColor property value in the light theme has changed slightly. Starting in R2025a, the default value is [0.1294 0.1294 0.1294]. Previously, the default value was [0 0 0].

Enable text markup by setting the Interpreter property. Specify the interpreter as "html", "latex","tex", or "none".

You can use these additional options when adding icons to a button:

Use the WordWrap property to prevent text from getting clipped horizontally when the width of the UI component is smaller than the text you want to display. Setting the WordWrap property to 'on' breaks the text into new lines so that each line fits within the component. It avoids breaking words when possible. When the property is set to 'off', the text does not wrap.