Photonix

HomeIndicator

Visual indicator for the home gesture area on mobile devices.

Preview

Usage
"use client";

import { Box, HomeIndicator } from '@photonix/ultimate';

export default function HomeIndicatorBasicExample() {
    return (
        <Box bg="secondary" borderRadius="lg" h={96} position="relative" w={320} maxW="100%" overflow="hidden">
            <HomeIndicator
                variant="ios"
                device="iPhone"
                orientation="Portrait"
                theme="light"
                style={{ position: 'absolute', bottom: 0, width: '100%' }}
            />
        </Box>
    );
}

Component API

HomeIndicator

Prop
Type
Default
Description
variant
"ios" | "android"
'ios'
Platform variant
device
"iPhone" | "iPad"
'iPhone'
Device type (iOS only)
orientation
"Portrait" | "Landscape"
'Portrait'
Orientation (iOS only)
theme
"light" | "dark"
'light' (Dark indicator for light backgrounds)
Color theme for the indicator
className
string
-
style
React.CSSProperties
-

On this page

Preview
Component API
Photonix UI - React Components, Templates & Figma Design System