Explore SwiftUI
Visually

Role Button With Default Label

Creates a button that displays a default label.

Glass Button Styles

A button style that applies glass border artwork based on the button’s context

RenameButton

A button that triggers a standard rename action

EditButton

A button that toggles the edit mode environment value

PasteButton

A system button that reads items from the pasteboard and delivers it to a closure.

Button Tint

Sets the buttons tint color

Button Roles

A value that describes the purpose of a button.

Button Border Shape

A shape used to draw a button’s border.

Button Styles

A type that applies standard interaction behavior and a custom appearance to all buttons within a view hierarchy

Button

Three ways to initialize a button

Title Toolbar Item Placement

Places content in the title area

ToolbarItem Shared Background Visibility

Controls the visibility of the glass background effect on items in the toolbar. In certain contexts, such as the navigation bar on iOS and the window toolbar on macOS, toolbar items will be given a glass background effect that is shared with other items in the same logical grouping

ToolbarSpacer

A standard space item in toolbars

SliderTickContentForEach

A type of slider content that creates content by iterating over a collection.

Custom Slider Ticks

Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels and customizable ticks.

Slider Color

Customizing the color of the slider

Stepped Min Max Label Slider

Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels

Stepped Slider

Creates a slider to select a value from a given range, subject to a step increment

Slider

Creates a slider to select a value from a given range

Future DatePicker

Creates an instance that selects multiple dates on or after some start date

MultiDatePicker

A control for picking multiple dates.

DatePicker Colors

Customizing the colors of the date picker

FieldDatePickerStyle

A date picker style that displays the components in an editable field

StepperFieldDatePickerStyle

A system style that displays the components in an editable field, with adjoining stepper that can increment/decrement the selected component

WheelDatePickerStyle

A date picker style that displays each component as columns in a scrollable wheel

GraphicalDatePickerStyle

A date picker style that displays an interactive calendar or clock

Hour Minute Seconds DatePicker

A DatePicker for just hour, minute, and second.

Future DatePicker

Creates an instance that selects a Date in a closed range

DatePicker Components

A date picker with only one displayed component

DatePicker

Creates an instance that selects a Date with an unbounded range

Gauge Colors

Customizing the colors of different styles with minimal effort

CircularGaugeStyle

A gauge style that displays an open ring with a marker that appears at a point along the ring to indicate the gauge’s current value

LinearGaugeStyle

A gauge style that displays a bar with a marker that appears at a point along the bar to indicate the gauge’s current value

AccessoryLinearCapacityGaugeStyle

A gauge style that displays bar that fills from leading to trailing edges as the gauge’s current value increases

AccessoryLinearGaugeStyle

A gauge style that displays bar with a marker that appears at a point along the bar to indicate the gauge’s current value

LinearCapacityGaugeStyle

A gauge style that displays a bar that fills from leading to trailing edges as the gauge’s current value increases

AccessoryCircularCapacityGaugeStyle

A gauge style that displays a closed ring that’s partially filled in to indicate the gauge’s current value

AccessoryCircularGaugeStyle

A gauge style that displays an open ring with a marker that appears at a point along the ring to indicate the gauge’s current value

Min Max Current Value Gauge

Creates a gauge showing a value within a range and describes the gauge’s current, minimum, and maximum values

Current Value Gauge

Creates a gauge showing a value within a range and that describes the gauge’s purpose and current value

Gauge

Creates a gauge showing a value within a range and describes the gauge’s purpose and current value

ProgressView Colors

Customizing the colors of the ProgressView

CircularProgressViewStyle

The style of a progress view that uses a circular gauge to indicate the partial completion of an activity

LinearProgressViewStyle

A progress view that visually indicates its progress using a horizontal bar

ProgressView

The different ProgressView initializers

Content Unavailable

A placeholder for empty results with optional button

Content Unavailable Search Text

A pre-built placeholder for empty search results with search text

Content Unavailable Search

A pre-built placeholder for empty search results

Context Menu Preview

A context menu with custom preview

Menu Action Button

Acts like a button and opens the menu on a secondary gesture

Context Menu

Adds a context menu to a view.

Nested Menu

A Menu inside a Menu

Menu Divider

A Menu with a Divider

Menu Section

A Section inside a Menu

Menu Fixed Order

Order items from top to bottom

Menu

A control for presenting a menu of actions.

ViewThatFits Vertical

A view that adapts to the available vertical space by providing the first child view that fits.

ViewThatFits

A view that adapts to the available space by providing the first child view that fits.

Divider Height

Customizing the height of the Divider

Divider Color

Customizing the color of the Divider

Vertical Divider

A vertical visual element that can be used to separate other content

Divider

A visual element that can be used to separate other content

Outline Group

A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data.

Disclosure Group

A view that shows or hides another content view, based on the state of a disclosure control.

Edit Button

A button that toggles the edit mode environment value.

Section Index Label and Visibility

Sets the label that is used in a section index to point to this section, typically only a single character long. Changes the visibility of the list section index.

Move Disabled

Adds a condition for whether the view’s view hierarchy is movable.

Delete Disabled

Adds a condition for whether the view’s view hierarchy is deletable.

Refreshable List

Marks this view as refreshable.

Swipe Action

Adds custom swipe actions to a row in a list.

List Badge Prominence

Specifies the prominence of badges created by this view.

List Badge

Generates a badge for the view from an integer value.

List Background Prominence

The prominence of the background underneath views associated with this environment.

List Row Background

Places a custom background view behind a list row item.

Hidden List Row Separator

Sets the display mode to hidden for the separator associated with this specific row.

Hidden List Section Separator

Sets whether to hide the separator associated with a list section.

List Section Separator Tint

Sets the tint color associated with a section.

List Row Separator Tint

Sets the tint color associated with a row.

List Item Tint

Sets a fixed tint color for content in a list.

List Section Margins

Set the section margins for the specific edges.

Compact List Section Spacing

Compact spacing between sections

Custom List Section Spacing

Sets the spacing between adjacent sections in a List to a custom value.

List Row Spacing

Sets the vertical spacing between two adjacent rows in a List.

Default Min List Header Height

The default minimum height of a header in a list.

Default Min List Row Height

The default minimum height of rows in a list.

List Row Insets

Applies an inset to the rows in a list.

Increased Header Prominence

Sets the header prominence to increased for this view.

SidebarListStyle

The list style that describes the behavior and appearance of a sidebar list.

InsetGroupedListStyle

The list style that describes the behavior and appearance of an inset grouped list.

InsetGroupedListStyle

The list style that describes the behavior and appearance of an inset grouped list.

InsetListStyle

The list style that describes the behavior and appearance of an inset list.

EllipticalListStyle

The list style that describes the behavior and appearance of an elliptical list.

CarouselListStyle

The carousel list style.

BorderedListStyle

The list style that describes the behavior and appearance of a list with standard border.

GroupBox Background

Set a custom GroupBox background

GroupBox With Label

A GroupBox with Label

GroupBox

A simple GroupBox

Hard ScrollEdgeEffect

A scroll edge effect with a hard cutoff and dividing line

Color Opacity

The Color opacity modifier

Color Gradient

The Color gradient modifier

UIKit Separator Colors

The UIKit separator colors that are also used in other components, such as the TextField

UIKit Content Background colors

The UIKit colors that are also used in other components like in List and GroupBox

UIKit Text Colors

The UIKit text colors that are also used in other components, such as the TextField

UIKit Fill Colors

UIKit Label Colors

Color Variants

HierarchicalShapeStyle, a shape style that maps to one of the numbered content styles

Semantic Colors

Standard Colors

The SwiftUI standard colors

Text Format

Creates a text view that displays the formatted representation of a nonstring type supported by a corresponding format style.

Materials

All materials

HelpLink

A button with a standard appearance that opens app-specific help documentation

TextFieldLink

A control that requests text input from the user when pressed

Custom Preview Item ShareLink

Creates an instance, with a custom label, that presents the share interface

ShareLink

A view that controls a sharing presentation

Link

A control for navigating to a URL

PaletteControlGroupStyle

A control group style that presents its content as a palette.

NavigationControlGroupStyle

The navigation control group style

MenuControlGroupStyle

A control group style that presents its content as a menu when the user presses the control, or as a submenu when nested within a larger menu

CompactMenuControlGroupStyle

A control group style that presents its content as a compact menu when the user presses the control, or as a submenu when nested within a larger menu

ControlGroup

Creates a new ControlGroup with the specified children

Navigation Subtitle

Configures the view’s subtitle for purposes of navigation, using a localized string

Navigation Split View Container Background

A background placement behind the content of a NavigationSplitView.

Navigation Container Background

Sets the container background of the enclosing container using a view.

ControlSize

A control version that is the default size

Background Extension Effect

Adds the background extension effect to the view. The view will be duplicated into mirrored copies which will be placed around the view on any edge with available safe area. Additionally, a blur effect will be applied on top to blur out the copies

Glass effect

Applies the Liquid Glass effect to a view

TabView Bottom Accessory Placement

A placement of the bottom accessory in a tab view. You can use this to adjust the content of the accessory view based on the placement

Bottom Accessory

A modifier to place content above the tabs

Hide Tab Bar On Scroll Down

Minimize the tab bar when downwards scrolling starts. Minimizing is supported for tab bars on only iPhone

Glass Effect Container

A view that combines multiple Liquid Glass shapes into a single shape that can morph individual shapes into one another

ContainerRelativeShape

A shape that is replaced by an inset version of the current container shape. If no container shape was defined, is replaced by a rectangle

Disable Sheet Dismiss Swipe

Conditionally prevents interactive dismissal of presentations like popovers, sheets, and inspectors. Dragging the sheet is still possible to a limited extent, as shown in the screenshot, but it will never be dismissed.

Page Screen Sheet Size

On devices smaller than a page of paper, such as iPhone, Apple Watch, and 8" or 11" iPads, the sheet fills the entire height and, unlike the default sheet on iPad, the full width. On macOS, .page behaves like .fitted.

Fitted Sheet Sizing

Sets the sizing of the containing presentation. This does not have any effect on smaller devices like iPhone and Apple Watch. On macOS, fitted is the default.

Sheet Corner Radius

Requests that the presentation have a specific corner radius.

Prioritize Sheet Content Scrolling

Configures the behavior of swipe gestures on a presentation. PresentationContentInteraction.scrolls prioritizes scrolling the content over resizing the sheet.

Sheet Background Interaction

Controls whether people can interact with the view behind a presentation.

Sheet Background

Sets the presentation background of the enclosing sheet using a shape style.

Sheet Drag Indicator Visibility

Sets the visibility of the drag indicator on top of a sheet.

Sheet Size

Sets the available detents for the enclosing sheet.

Item Sheet

Presents a sheet using the given item as a data source for the sheet’s content. On watchOS, sheets are displayed as fullScreenCover.

Boolean Sheet

Presents a sheet when a binding to a Boolean value that you provide is true. On watchOS, sheets are displayed as fullScreenCover.

Label Styles

Sets the style for labels within this view.

Custom Label

Creates a label with a custom title and icon.

Image Label

Creates a label with an icon image and a title generated from a localized string.

System Image Label

Creates a label with a system icon image and a title generated from a localized string.

Custom Labeled Content

Creates a standard labeled element, with a view that conveys the value of the element and a label.

Formatted Labeled Content

Creates a labeled informational view from a formatted value.

Labeled Content

Creates a labeled informational view.

Uniform Concentric Rectangle

Create a rectangle with the same corner style set on four corners.

Concentric Rectangle

A concentric rectangle whose corner radii are defined from the same circle center as its parent element. The outermost parent is the device frame.