Square Dashboard Add-Ons UI Components Reference

Use Square’s UI compoonent library to build your Dashboard Add-ons.

This component reference documentation helps you build UI experiences for your Square Dashboard Add-ons.

All Square Dashboard Add-on UI components are available in Square’s Figma design library. Please refer to the Component Design Guidelines document for more information on accessing the design library, which is shared through Google Drive. Please contact Square at dashboard-add-ons-alpha@squareup.com if you do not have access.

Limitations: Due to intentional limations in the Add-ons architecture, you cannot build UI using normal HTML and CSS. You must use the supplied UI components to build all of your UI elements. See How Add-ons Render for more information.

Some of the UI components (such as Row) in the first Developer Preview of Square Dashboard Add-ons don’t yet support leading or trailing accessories slots.

Layout

Use layout components to organize content and place them in the context of your Add-on. These components can be used as layout containers for every other Add-on.

UI component	Description
Accessory	Displays a slotted leading or trailing icon or image as an accessory within other components.
Box	Organize content in a box element. Add margins, padding, borders, and more.

Typography

UI component	Description
Text	Stylize text with predefined parameters. Toggle weights, types, sizes, and more.
Small	Represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small.

Navigation

Use action components to help a seller perform common actions on a component.

UI component	Description
Button	Perform common actions, such as “Submit” or “Export”, or enable page navigation.
ButtonDropdown	Renders a list of items when clicked, using a Button as a trigger, and is composed of a slotted List component.
ButtonGroup	Manages the layout of a set of related buttons, such as the actions at the bottom of a modal, or the toolbar buttons of a header.
Link	Render link content with styling and specific rendering behavior.

Content

Use content components to create types of content.

UI component	Description
Divider	Render an icon in a component.
Icon	Render an icon in a component.
Image	Render an image in a component.
List	Render a list with customizable interaction and styling.
Pill	Conveys status or emphasizes content.
Row	Group and present text-based content in an organized, consistent manner.

Forms

Use form components to create input fields and controls that require a seller’s input.

UI component	Description
Form	A form component to hold fields and input components.
Field	A field component to hold input components.
Checkbox	Set parameters for a checkbox component.
Input	Add control and validation parameters to an input component.
Radio	Add control and validation parameters to a radio component. Square recommends using the Radio component in a Row component.
Select/Dropdown	Stylize and add control parameters to a select/dropdown component. Square recommends using the Select/Dropdown component in a List or Row component.
TextArea	Add control and validation parameters to a TextArea component.
Toggle	A tooltip component to display text on hover actions.

Charts

Use chart components to create types of chart visualizations.

UI component	Description
ListChart	Render a list chart.
PercentageBarChart	Render a percentage bar chart.
VerticalBarChart	Render a vertical bar chart.

Slots

As a concept, a lot of the UI components make use of slotted elements. This means, to pass components as a named parameter to another component, you will need to pass it as a slot. For example, see how the Select component uses a slotted list:

<Select
  onChange={(value) => console.log(value)}
  placeholder="This is a select placeholder"
>
  <List slot="list">
    <Row value="Apple">Apples</Row>
    <Row value="Orange">Orange</Row>
    <Row value="Banana">Banana</Row>
  </List>
</Select>

Slots are documented on a components documentation page, so keep an eye out for them.