Skip to main content

Basic Widgets

Basic widgets are visible and common widgets that are used to build user interfaces of various kinds of applications. You may be knowing the form and functions of these widgets. However, providing here a brief explanation of these widgets for quick reference.

Circle Avatar​

  • Represents a user of the application.
  • It is a circle with User initials or Profile images.
  • Change Background and Foreground color from the Properties panel. Background refers to the Circle and foreground refers to the Text.
  • You may upload Images from the URLs as background and foreground.
  • Change the radius of the circle using a slider or entering the value.
  • Customize the text on the circle. Text Properties open when the text is clicked.

Divider​

  • A thin horizontal line that divides the screen into horizontal sections.
  • Divider provides a space between two widgets by drawing a line between them.
  • You can change the height of the divider to create space between the widgets. The horizontal line of the divider gets centered around this height.
  • You can also change the color or thickness of the line.
  • Provide leading or trailing indent to adjust the length of the line.
  • Select an item from several options.
  • The button front displays the selected item. Once clicked, it displays the menu showing all the items to select from.

Elevated Button​

  • Use when other elements on the screen are generally flat.
  • The elevated style of the button captures the user's attention.

Icon​

  • Visual representation of program, function, event, or any other important thing.
  • Choose from hundreds of images from Hypi's Tink's icon collection to place on the icon widget.
  • Icon is generally not interactive unless it is placed on a button.
  • You can customize the icon by changing its color and size.

Outlined Button​

  • Rectangular shape button with rounded border.
  • You can change its properties like color, shadow color, padding, etc.

Text​

  • Display the text with this widget.
  • Text can have different styles.
  • You can change Text Properties like Value, Font, Weight, Size, Alignment, Color, emphasis, etc.

Text Button​

  • A flat button with Text display.
  • Use on dialogues and toolbars or inline with other content.

Text Field​

  • Enter the text in this widget using hardware or onscreen keyboard.
  • Use to accept and process user inputs.

Tink Image​

  • Uploads an image from a url or your computer.
  • To upload from your computer, drag the Asset to the screen. It becomes Tink Image.

Tooltip​

  • Provide a textual representation of the widget using Tooltip.
  • It is a text label that explains functions associated with a widget.
  • Wrap any widget like Button, Text with the tooltip widget.

Vertical Divider​

  • A thin horizontal line that divides the screen into vertical sections.
  • Its colour or thickness can be changed.