Button
How to use the Button component from the Default kit.
import { Canvas } from "@react-three/fiber"; import { Fullscreen } from "@react-three/uikit"; import { colors } from "@react-three/uikit-default"; import { ChevronRight } from '@react-three/uikit-lucide' import { Button } from '@react-three/uikit-default' function ButtonDemo() { return ( <Button variant="outline" size="icon"> <ChevronRight width={16} height={16} /> </Button> ) } export default function App() { return ( <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}> <ambientLight intensity={0.5} /> <directionalLight intensity={1} position={[-5, 5, 10]} /> <Fullscreen overflow="scroll" flexDirection="column" alignItems="center" padding={32} backgroundColor={colors.background} > <ButtonDemo /> </Fullscreen> </Canvas> ) }
import { Button } from "@react-three/uikit-default";