Modifiers

The accessibility hint

The accessibility label

The accessibility value

Width/height aspect ratio and content mode

The background color (hex string, e.g., '#FF0000')

Background color and alignment

Text view to display as a badge. Set the value to nil to hide the badge.

Select the type of badge

The blur radius

The border parameters. Color and width.

Brightness adjustment (-1 to 1)

The button style

Whether to clip content

The clipping shape

Corner radius for rounded rectangle (default: 8)

Whether to invert colors

A shape configuration from RoundedRectangularShape.rect()

Contrast multiplier (0 to infinity, 1 = normal)

The corner radius value

Whether the view should be disabled

Whether the view should use its ideal width or height

The foreground color (hex string)

The foreground style configuration. Can be:

Simple Color (string):

• Hex colors: '#FF0000', '#RGB', '#RRGGBB', '#AARRGGBB'
• Named colors: 'red', 'blue', 'green', etc.

Explicit Color Object:

{ type: 'color', color: '#FF0000' }

Hierarchical Styles (Semantic): Auto-adapting semantic styles that respond to light/dark mode and accessibility settings:

{ type: 'hierarchical', style: 'primary' }    // Most prominent (main content, headlines)
{ type: 'hierarchical', style: 'secondary' }  // Supporting text, subheadlines
{ type: 'hierarchical', style: 'tertiary' }   // Less important text, captions
{ type: 'hierarchical', style: 'quaternary' } // Subtle text, disabled states
{ type: 'hierarchical', style: 'quinary' }    // Most subtle (iOS 16+, fallback to quaternary)

Linear Gradient:

{
  type: 'linearGradient',
  colors: ['#FF0000', '#0000FF', '#00FF00'],
  startPoint: { x: 0, y: 0 },    // Top-left
  endPoint: { x: 1, y: 1 }       // Bottom-right
}

Radial Gradient:

{
  type: 'radialGradient',
  colors: ['#FF0000', '#0000FF'],
  center: { x: 0.5, y: 0.5 },    // Center of view
  startRadius: 0,                // Inner radius
  endRadius: 100                 // Outer radius
}

Angular Gradient (Conic):

{
  type: 'angularGradient',
  colors: ['#FF0000', '#00FF00', '#0000FF'],
  center: { x: 0.5, y: 0.5 }     // Rotation center
}

The frame parameters. Width, height, minWidth, maxWidth, minHeight, maxHeight, idealWidth, idealHeight and alignment.

The glass effect parameters. Variant, interactive, tint and shape.

The id of the glass effect

The namespace id of the glass effect. Use Namespace component to create a namespace.

Grayscale amount (0 to 1)

The prominence to apply.

Whether the view should be hidden

Hue rotation angle in degrees

The safe area regions to ignore and the edges to expand into

Layout priority value

The amount of space between the bottom of one line and the top of the next line in points. This value is always nonnegative. Otherwise, the default value will be used.

The row color (hex string, e.g., '#FF0000')

The inset to apply to the rows in a list.

The margins to apply to the section in a list.

The spacing to apply

The masking shape

Corner radius for rounded rectangle (default: 8)

The id of the view

The namespace id of the view. Use Namespace component to create a namespace.

A value that you use to align multiple lines of text within a view.

The offset parameters. x and y.

Function to call when the view appears

Function to call when the view disappears

Function to call when long pressed

Minimum duration for long press (default: 0.5s)

Function to call when tapped

Opacity value between 0 and 1

Overlay color and alignment

The padding parameters. Top, bottom, leading, trailing, horizontal, vertical and all.

Rotation angle in degrees

Saturation multiplier (0 to infinity, 1 = normal)

Scale factor (1.0 = normal size)

The visibility of the background

The keyboard dismiss mode

The shadow parameters. Radius, offset and color.

Controls whether the strikethrough is visible (true to show, false to hide).

Enable selection

The tint color (hex string)

The truncation mode that specifies where to truncate the text within the text view, if needed. You can truncate at the beginning, middle, or end of the text view.

Controls whether the underline is visible (true to show, false to hide).

The z-index value