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