Components

Learn about Components within Budibase

Components are the building blocks of Budibase. They are used to construct your user interface. At Budibase we use the Spectrum design system created by Adobe. This gives you a great out-of-the-box experience with themes by default.

There are a number of components in Budibase. They can be found in the components tab, found along the left hand side of the preview window in the Design section.
Clicking the + button in the top right corner of the panel will allow you to add a component to the screen.

Adding components

There are a number of ways for your convenience to add components to a screen.

The + Component button in the top-right of the screen is a shortcut that allows you to add a component regardless of what design panel you have open on the left-hand side.
You can also select a component (or add if the screen is empty) no matter the open design panel.

When the components panel is open, you can press the + button on the top right corner of the panel.
This will present a searchable and grouped list of components to choose from.

You can also see the available Blocks from the blocks tab.

Deleting a component

The easiest way to delete a component is to select it and press the delete or backspace key.
You will be prompted to confirm the deletion.

Component tree

The component tree displays the layout and hierarchy of your components.
Components can either be below one another, or nested inside a parent component.

Parent components include those related to a Data Source or some variety of container:

Components can be re-arranged within the component tree with drag-and-drop.
To assist with rearrangement, a green line will highlight the destination whilst a green box indicates that a component will be dropped inside that component.

Editing

Within the component tree you can also delete, copy and move components by clicking on the ... beside the component name.

Using components

When you have added a component you will be able to see the options that you can tweak on the right side under the Settings bar. Some components also have a toolbar that will appear above it in the preview window.

Video tutorial


Did this page help you?