A floating action button (FAB) is a circular icon button that hovers over content to execute a primary action in the application.
const Example = () => {
return <Box height="200" w="400" shadow="2" rounded="lg" bg="white:alpha.20">
<Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon color="white" as={<AntDesign name="plus" />} size="sm" />} />
</Box>;
};
import { Fab } from "native-base";
const Example = () => {
return <Center>
<Box height="200" w="400" shadow="2" rounded="lg" _dark={{
bg: "coolGray.200:alpha.20"
}} _light={{
bg: "coolGray.200:alpha.20"
}}>
<Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon color="white" as={AntDesign} name="plus" size="sm" />} />
</Box>
</Center>;
};
const Example = () => {
return <Center>
<Box height="200" w="400" shadow="2" rounded="lg" _dark={{
bg: "coolGray.200:alpha.20"
}} _light={{
bg: "coolGray.200:alpha.20"
}}>
<Fab renderInPortal={false} shadow={2} placement="top-right" size="sm" icon={<Icon color="white" as={MaterialIcons} name="lightbulb" size="4" />} label="Quick Start" />
</Box>
</Center>;
};
const Example = () => {
return <Center>
<Box height="200" w="400" shadow="2" rounded="lg" _dark={{
bg: "coolGray.200:alpha.20"
}} _light={{
bg: "coolGray.200:alpha.20"
}}>
<Fab renderInPortal={false} shadow={2} right={70} bottom={50} size="sm" icon={<Icon color="white" as={AntDesign} name="plus" size="4" />} />
</Box>
</Center>;
};
NativeBase ships with a default theme for each component. Checkout the default theme of fab
.
Info:
We can easily extend the fab component theme using extendTheme function as described in the documentation .Fab implements
,
,
,
,
,
,
,
,
,
,
