Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

These modifiers control a component’s surface appearance. opacity sets transparency. foregroundStyle colors text and shape fills (and propagates to descendants), while tint colors interactive controls. background sits behind the component as a color, gradient, material, or another component. cornerRadius, border, and shadow shape and outline the component. They compose in chain order — padding runs before background, so the background extends to cover the padded area.

​
opacity

Sets the component’s opacity. 
.opacity(value: number): Component
​
value
number
required
The opacity level, from 0 (fully transparent) to 1 (fully opaque).
Unlike .hidden(), a component with .opacity(0) still occupies layout space and remains hittable (responds to tap gestures). Use .allowsHitTesting(false) in combination with .opacity(0) to make it non-interactive. Opacity applies to the entire component subtree, including all children. Semi-transparent component 
Text("50% opacity")
    .opacity(0.5)
Fading an image 
Image({ url: "background.jpg" })
    .resizable()
    .scaledToFill()
    .opacity(0.3)
Animated fade 
const body = () => {
    const [isVisible, setIsVisible] = useState(false)

    return VStack([
        Button("Toggle", () => setIsVisible(!isVisible)),
        Text("Fading content")
            .opacity(isVisible ? 1 : 0)
    ])
}
Disabled appearance 
VStack([
    Button("Submit", () => {}),
    Text("Please fill in all fields")
])
    .opacity(0.4)
    .disabled(true)

​
foregroundStyle

Sets the foreground style (text color, shape fill, etc.) for a component and its descendants. 
.foregroundStyle(style: Style)
​
style
Style
required
A Color, gradient (LinearGradient, RadialGradient, etc.), or Material to apply as the foreground style.
Color text 
Text("Blue text")
    .foregroundStyle(Color("blue"))
System color 
Text("Secondary text")
    .foregroundStyle(Color("secondaryLabel"))
Gradient text 
Text("Gradient")
    .font("largeTitle")
    .foregroundStyle(LinearGradient({
        colors: ["red", "blue"],
        startPoint: "leading",
        endPoint: "trailing"
    }))
Style a shape 
Circle()
    .frame({ width: 50, height: 50 })
    .foregroundStyle(Color("green"))
Inherited by descendants 
VStack([
    Text("All text in this stack"),
    Text("will be red")
])
    .foregroundStyle(Color("red"))

​
tint

Sets the tint color for interactive controls. 
.tint(color: Color): Component
​
color
Color
required
The tint color to apply to interactive controls such as buttons, toggles, and links.
.tint() affects the accent color of interactive controls, not the text color. Use foregroundStyle to change text or shape fill colors. Tint propagates to child components through the environment. Tinted button 
Button("Delete", () => {})
    .tint(Color("red"))
Tinted toggle 
const body = () => {
    const [isOn, setIsOn] = useState(false)
    return Toggle("Dark Mode", { isOn, setIsOn })
        .tint(Color("purple"))
}
Tint a container Apply tint to a parent container to affect all interactive children. 
VStack([
    Button("Primary Action", () => {}),
    Button("Secondary Action", () => {}),
]).tint(Color("orange"))

​
background

Sets the background of a component to a color, gradient, material, or another component. 
.background(style?: Style)
.background(content: Component)
.background(props: { alignment: Alignment }, content: Component)
​
style
Style
Style background overload: a Color, gradient, or Material to fill the background.
​
content
Component
required
Component background overload: a component to render behind this component.
​
props
object
required
Component background with alignment overload.
​
content
Component
required
A component to render behind this component, positioned according to alignment.
Color background 
Text("Hello")
    .padding(16)
    .background(Color("blue"))
Gradient background 
Text("Gradient")
    .padding(16)
    .background(LinearGradient({
        colors: ["purple", "blue"],
        startPoint: "leading",
        endPoint: "trailing"
    }))
Material background 
Text("Frosted")
    .padding(16)
    .background(Material("thin"))
Component background 
Text("Labeled")
    .padding(16)
    .background(
        RoundedRectangle(12)
            .foregroundStyle(Color("blue"))
    )
Component background with alignment 
Text("Badge")
    .padding(16)
    .background(
        { alignment: "topTrailing" },
        Circle()
            .frame({ width: 12, height: 12 })
            .foregroundStyle(Color("red"))
    )

​
cornerRadius

Rounds the corners of a component. 
.cornerRadius(radius: number)
​
radius
number
required
The corner radius in points.
cornerRadius clips the content at the corners. For more control over the clipping shape, use clipShape with a RoundedRectangle. Round a card 
VStack([
    Text("Card Title").font("headline"),
    Text("Card content goes here.")
])
    .padding(16)
    .background(Color("white"))
    .cornerRadius(12)
Round an image 
Image({ url: "photo.jpg" })
    .resizable()
    .frame({ width: 100, height: 100 })
    .cornerRadius(8)
Pill shape with large radius 
Text("Tag")
    .padding({ leading: 16, trailing: 16, top: 8, bottom: 8 })
    .background(Color("blue"))
    .foregroundStyle(Color("white"))
    .cornerRadius(20)

​
border

Adds a border around a component. 
.border(config?: { style: Style; width?: number } | Style | number)
​
config
{ style: Style; width?: number } | Style | number
The border configuration. Can be:
  • An object with style (a Color or gradient) and optional width
  • A Style value directly (uses default width of 1)
  • A number specifying just the width (uses the foreground style)
Simple color border 
Text("Bordered")
    .padding(12)
    .border(Color("gray"))
Border with custom width 
Text("Thick border")
    .padding(12)
    .border({ style: Color("blue"), width: 2 })
Gradient border 
Text("Gradient border")
    .padding(12)
    .border({
        style: LinearGradient({
            colors: ["red", "blue"],
            startPoint: "leading",
            endPoint: "trailing"
        }),
        width: 2
    })
Combined with corner radius 
Text("Rounded bordered")
    .padding(12)
    .cornerRadius(8)
    .border({ style: Color("blue"), width: 1 })

​
shadow

Adds a drop shadow to a component. 
.shadow(props?: {
    radius: number;
    x?: number;
    y?: number;
    color?: Color;
}): Component
​
props
object
Basic shadow 
RoundedRectangle(12)
    .frame({ width: 200, height: 100 })
    .foregroundStyle(Color("white"))
    .shadow({ radius: 8 })
Offset shadow 
Text("Elevated")
    .font("title")
    .padding(16)
    .background(Color("white"))
    .cornerRadius(12)
    .shadow({ radius: 4, x: 0, y: 2 })
Colored shadow 
Circle()
    .frame({ width: 80, height: 80 })
    .foregroundStyle(Color("blue"))
    .shadow({ radius: 12, color: Color("blue").opacity(0.5) })

​
See also

  • overlay — render a component on top of this one
  • clipShape — clip the component to an arbitrary shape
  • hidden — hide a component and remove it from hit testing
  • Color — color values for foreground, background, and border
  • Material — frosted-glass background materials
  • Alignment — alignment values for component backgrounds