Modifiers

The accessibility hint.

The accessibility label.

The accessibility value.

Width/height aspect ratio and content mode.

The background color (hex string). For example, #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 font configuration. When family is provided, it uses Font.custom(). When family is not provided, it uses Font.system() with the specified weight and design.

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', and so on.

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). For example, #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 (x, y) and color.

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

Enable selection

The tint color (hex string). For example, #FF0000.

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.