Main Content

App Building Components

App Designer and UI figures support a large set of components for designing modern, full-featured applications. The tables below list the components that are available.

  • Common Components — Include components that respond to interactions, such as buttons, sliders, drop-down lists, and trees.

  • Axes — Include axes to create plots for data visualization and exploration.

  • Containers and Figure Tools — Include panels and tabs for grouping components, as well as menu bars.

  • Instrumentation Components — Include gauges and lamps for visualizing status, as well as knobs and switches for selecting input parameters.

  • Extensible Components — Include custom UI components that you author. Interface with third-party libraries to display content like widgets or data visualizations.

  • Toolbox Components — Include toolbox authored UI components. Requires additional toolbox license and installation.

All components are available programmatically. Most UI components are also available in the App Designer Component Library for you to drag and drop onto the canvas. To add components to an App Designer app that are not available in the Component Library, or that you want to add dynamically to the running app, see Add UI Components to App Designer Programmatically.

When calling graphics functions in App Designer, the workflow is slightly different than you typically use at the MATLAB® command line. For more information about how to call graphics functions in App Designer, see Display Graphics in App Designer.

Common Components

Component InformationExample
Button Properties

Push button with a bar chart icon to the left of the label "Plot Data"

CheckBox Properties

A cleared check box labeled "Remove Outliers" and a selected check box beneath it labeled "Add Trendline"

DatePicker Properties

An expanded date picker that displays drop-down menus for month and year, and the calendar for your selection. It also has icons that switch the calendar view to the previous month, the current date, or the next month.

DropDown Properties

Two drop-down components. The top drop-down is editable and collapsed. The bottom drop-down component is not editable. It is expanded and shows items "Red", "Green", and "Blue".

NumericEditField Properties

Numeric edit field that shows the number 12. The edit field label is "Sample Size".

EditField Properties

A text edit field for entering a name displays "Cleve"

Hyperlink Properties

A hyperlink with the display text "bat365 home page" and a tooltip that displays the URL of the bat365 website.

Image Properties

An image component showing the bat365 L-shaped Membrane logo

Label Properties

Label that says "Select an Option" in bold font

ListBox Properties

List box with three items: "Red", "Green", and "Blue"

ButtonGroup Properties
RadioButton Properties

Button group labeled "Select a Color" with three vertically stacked radio buttons. From top to bottom, the radio buttons are labeled "Red", "Green", and "Blue".

Slider Properties

Two slider components, both with limits ranging from zero to 100. The slider on the left is in a horizontal orientation. Its value is set to 40. The slider on the right is in a vertical orientation and its value is set to 75.

RangeSlider Properties

Two range slider components, both with limits ranging from zero to 100. The slider on the left is in a horizontal orientation with a range of values between 20 and 60. The slider on the right is in a vertical orientation with a range of values between 10 and 90.

Spinner Properties

Spinner component with its value set to zero

StateButton Properties

Two state buttons stacked vertically. The top button is labeled "Start". It is light gray in color. The bottom button labeled "Stop" is a darker gray.

Table Properties

A table UI component that shows three columns: "LastName", "Age", and "Smoker". The table is sorted by last name in ascending order. The first two cells in the "Age" column are greater than 40 and appear in blue bold font. The third cell in the "Smoker" column shows a selected check box and the background color of the cell is yellow.

TextArea Properties

Text area with the text "This sample might be an outlier"

ButtonGroup Properties
ToggleButton Properties

Toggle button group labeled "Water Temperature (C)". It contains three vertically stacked toggle buttons. From top to bottom the buttons are labeled "0", "40", and "100". The "40" button is a darker gray color.

Tree Properties
TreeNode Properties

A tree with one node called "Samples" that is expanded to show its two nested nodes "Cape Ann" and "Nantucket". Each of these three nodes shows a blue file icon to the left of their label text. The "Cape Ann" node is also expanded to show two nested nodes called "Water Quality" and "Air Quality".

CheckBoxTree Properties
TreeNode Properties

A tree with three parent nodes called "Sedimentary", "Igneous", and "Metamorphic". The node called "Sedimentary" is unchecked and collapsed, the node called "Igneous" is checked and collapsed, and the node called "Metamorphic" is partially checked and expanded to show its nested nodes "Slate" , "Marble", and "Gneiss". Each of the nodes shows a check box to the left of their label text.

Axes

Axes InformationExample
UIAxes Properties

A mesh surface plot

Axes Properties
This object can be added programmatically only.

Two normalized histogram plots in the same axes. A blue histogram is centered near zero and an orange one is centered near one.

GeographicAxes Properties
This object can be added programmatically only.

Set of geographic axes that uses the 'colorterrain' basemap. A solid red line is plotted between two points: Imperial Beach, California and San Francisco, California. The two end points are marked with red asterisks.

PolarAxes Properties
This object can be added programmatically only.

Scatter chart in polar coordinates

Containers and Figure Tools

Container InformationExample

GridLayout Properties

Grid layout manager shown as selected on the App Designer canvas. The cursor is over the configure icon, and a tooltip next to it says "Configure grid layout".

Panel Properties

Empty panel with the label "Data".

TabGroup Properties
Tab Properties

Tab group with two tabs called "Data" and "Plots". The "Data" tab is selected. It is a lighter gray than the "Plots" tab.

Menu Properties

Menu bar with the "File" menu expanded to show three submenus called "Open", "Save", and "Export"

ContextMenu Properties

A context menu for a date picker component. The context menu has two menu items called "Change Format" and "Restore Defaults".

Toolbar Properties
PushTool Properties
ToggleTool Properties

Custom toolbar that, from left to right, shows an orange download icon, a dark gray email icon, and an orange help icon with a vertical separator to the left of it

Dialogs and Notifications

Dialog InformationExample
uialert
This object can be added programmatically only.

An Invalid File dialog box displayed in front of a UI figure. A red octagon icon with a white exclamation point appears to the left of an alert message that says "File not found".

uiconfirm
This object can be added programmatically only.

A Confirm Save dialog box with the message "Saving these changes will overwrite previous changes." The options it presents are "Overwrite", "Save as new", and "Cancel".

uiprogressdlg
This object can be added programmatically only.

A progress dialog box displayed in front of a UI figure. The message displayed above the progress bar says "Loading your data". A blue progress bar shows that the process is one-third complete.

uisetcolor
This object can be added programmatically only.

Color picker dialog box that shows the standard colors, recent colors, and preview of the default color which is set to yellow

uigetfile
This object can be added programmatically only.

File selection dialog box

uiputfile
This object can be added programmatically only.

Save to file dialog box

uigetdir
This object can be added programmatically only.

Folder selection dialog box

uiopen
This object can be added programmatically only.

Load file into workspace dialog box

uisave
This object can be added programmatically only.

Save workspace variables dialog box

Instrumentation

Component InformationExample
Gauge Properties

Circular gauge with limits ranging from zero to 100 and a value set to 60

NinetyDegreeGauge Properties

Ninety degree gauge with limits ranging from zero to 100 and a value set to 60

LinearGauge Properties

Linear gauge with limits ranging from zero to 100 and a value set to 60

SemicircularGauge Properties

Semicircular gauge with limits ranging from zero to 100 and a value set to 60

Knob Properties

Knob with limits ranging from zero to 100. The value is set to zero.

DiscreteKnob Properties

Discrete knob with items, "Off", "Low", "Medium", and "High". The knob value is set to "Off."

Lamp Properties

Lamp component with green color

Switch Properties

Slider switch with the slider to the left in the off position

RockerSwitch Properties

Rocker switch oriented vertically. The bottom of the rocker is pressed into the "Off" position.

ToggleSwitch Properties

Toggle switch oriented vertically. The switch is toggled downward into the "Off" position.

Extensible Components

Component InformationExample

matlab.ui.componentcontainer.ComponentContainer Class

matlab.graphics.chartcontainer.ChartContainer Class

Component container that combines a custom chart and custom color picker component along with a check box and a spinner.

HTML Properties

Two HTML UI components stacked vertically. The top component shows formatted text and the bottom component shows a web page.

Toolbox Components

Apps created in App Designer or with the uifigure function support Aerospace Toolbox components. For more information, see Flight Instruments (Aerospace Toolbox). To use toolbox components, a valid license and installation of the associated toolbox is required.

Related Topics