Detent - Metabind

declare const Detent: {
    medium: { detentType: "medium" };
    large: { detentType: "large" };
    fraction(value: number): { detentType: "fraction"; value: number };
    height(value: number): { detentType: "height"; value: number };
};

Properties

Detent.medium

{ detentType: 'medium' }

A standard medium-sized detent, typically around half the screen height.

Detent.large

{ detentType: 'large' }

A large detent that fills most or all of the available screen space.

Methods

fraction

Creates a custom detent at a fraction of the screen height.

Detent.fraction(value: number): { detentType: "fraction"; value: number }

value

number

required

A number between 0 and 1 representing the fraction of screen height.

height

Creates a custom detent at a fixed height in points.

Detent.height(value: number): { detentType: "height"; value: number }

value

number

required

The fixed height in points.

Usage

Standard detents

const body = () => {
    const [isPresented, setIsPresented] = useState(false)

    return VStack([
        Button("Show Sheet", () => setIsPresented(true))
    ])
    .sheet({
        isPresented,
        setIsPresented,
        content: () => Text("Sheet content")
    })
    .presentationDetents([Detent.medium, Detent.large])
}

Fractional detent

const body = () => {
    const [isPresented, setIsPresented] = useState(false)

    return VStack([
        Button("Show Sheet", () => setIsPresented(true))
    ])
    .sheet({
        isPresented,
        setIsPresented,
        content: () => Text("Quarter-height sheet")
    })
    .presentationDetents([Detent.fraction(0.25)])
}

Fixed height detent

const body = () => {
    const [isPresented, setIsPresented] = useState(false)

    return VStack([
        Button("Show Sheet", () => setIsPresented(true))
    ])
    .sheet({
        isPresented,
        setIsPresented,
        content: () => Text("300pt sheet")
    })
    .presentationDetents([Detent.height(300)])
}

Combining detent types

const body = () => {
    const [isPresented, setIsPresented] = useState(false)

    return VStack([
        Button("Show Sheet", () => setIsPresented(true))
    ])
    .sheet({
        isPresented,
        setIsPresented,
        content: () => VStack([
            Text("Drag to resize"),
            Text("Three snap points")
        ])
    })
    .presentationDetents([
        Detent.height(200),
        Detent.fraction(0.5),
        Detent.large
    ])
}

Notes

Detents define the snap points where a sheet rests when dragged by the user.
Multiple detents allow users to resize the sheet between defined sizes.
The order of detents in the array does not matter — the sheet snaps to the closest detent.
On platforms that do not support detents, sheets typically default to full screen.
Detent.medium and Detent.large are semantic and adapt to platform conventions.
Fraction values should be between 0 and 1.

animations Color

​Properties

​Methods

​fraction

​height

​Usage

​Standard detents

​Fractional detent

​Fixed height detent

​Combining detent types

​Notes