Skip to content

Basic

Basic components display one piece of content or take one input. All of them live in package ui.

Content

  • Text: labels, headings and paragraphs, with wrapping, line limits and truncation.
  • Icon: a monochrome symbol from the outline or solid set, tinted with a color.
  • Image: one picture from a file or a URL, loaded in the background.
  • Badge: a small capsule with a count or a one-word status.
  • Divider: a horizontal hairline between groups of content.
  • Progress Bar: how much of a task is done, or an indeterminate bar.

Controls

  • Button: runs a closure when the user taps, clicks or presses it.
  • Toggle: a switch for a setting that takes effect at once.
  • Slider: picks a number from a range by dragging a knob.
  • Segmented Control: a row of mutually exclusive choices.
  • Text Field: one line of editable text.