Buttons
import { Button, ButtonProps, Flex, useColorMode } from '@chakra-ui/react';
import { BsSun, BsMoonStarsFill } from 'react-icons/bs';
export default function ColorModeToggle(props: ButtonProps) {
const { colorMode, toggleColorMode } = useColorMode();
return (
/**
* Ideally, only the button component should be used (without Flex).
* Props compatible with <Button /> are supported.
*/
<Flex h="100vh" justifyContent="center" alignItems="center">
<Button
aria-label="Toggle Color Mode"
onClick={toggleColorMode}
_focus={{ boxShadow: 'none' }}
w="fit-content"
{...props}>
{colorMode === 'light' ? <BsMoonStarsFill /> : <BsSun />}
</Button>
</Flex>
);
}
import {
Popover,
PopoverTrigger,
PopoverContent,
PopoverBody,
PopoverArrow,
IconButton,
Button,
Stack,
Flex,
} from '@chakra-ui/react';
import { BsThreeDotsVertical, BsChatSquareQuote } from 'react-icons/bs';
import { RiShutDownLine, RiRestartLine, RiFileShredLine } from 'react-icons/ri';
export default function ServerSecondaryOptions() {
return (
/**
* You may move the Popover outside Flex.
*/
<Flex justifyContent="center" mt={4}>
<Popover placement="bottom" isLazy>
<PopoverTrigger>
<IconButton
aria-label="More server options"
icon={<BsThreeDotsVertical />}
variant="solid"
w="fit-content"
/>
</PopoverTrigger>
<PopoverContent w="fit-content" _focus={{ boxShadow: 'none' }}>
<PopoverArrow />
<PopoverBody>
<Stack>
<Button
w="194px"
variant="ghost"
rightIcon={<BsChatSquareQuote />}
justifyContent="space-between"
fontWeight="normal"
fontSize="sm">
Request Access
</Button>
<Button
w="194px"
variant="ghost"
rightIcon={<RiFileShredLine />}
justifyContent="space-between"
fontWeight="normal"
colorScheme="red"
fontSize="sm">
Purge Redis Cache
</Button>
<Button
w="194px"
variant="ghost"
rightIcon={<RiRestartLine />}
justifyContent="space-between"
fontWeight="normal"
colorScheme="red"
fontSize="sm">
Restart Server
</Button>
<Button
w="194px"
variant="ghost"
rightIcon={<RiShutDownLine />}
justifyContent="space-between"
fontWeight="normal"
colorScheme="red"
fontSize="sm">
Disable Server
</Button>
</Stack>
</PopoverBody>
</PopoverContent>
</Popover>
</Flex>
);
}
import { Button, ButtonProps, Flex } from '@chakra-ui/react';
export default function FollowButtonWithShadow(props: ButtonProps) {
return (
<Flex h="100vh" justifyContent="center" alignItems="center">
<Button
{...props}
/* flex={1} */
px={4}
fontSize={'sm'}
rounded={'full'}
bg={'blue.400'}
color={'white'}
boxShadow={
'0px 1px 25px -5px rgb(66 153 225 / 48%), 0 10px 10px -5px rgb(66 153 225 / 43%)'
}
_hover={{
bg: 'blue.500',
}}
_focus={{
bg: 'blue.500',
}}>
Follow me
</Button>
</Flex>
);
}
import { Button, ButtonProps, Flex, useColorModeValue } from '@chakra-ui/react';
import { useState } from 'react';
function randomColor() {
return Math.floor(Math.random() * 5);
}
const colorList: string[] = [
'#E53E3E',
'#38A169',
'#00B5D8',
'#44337A',
'#ED64A6',
];
export default function ClickMe(props: ButtonProps) {
const [colorCode, setColorCode] = useState(colorList[randomColor()]);
return (
<Flex
h="100vh"
justifyContent="center"
alignItems="center"
bgColor={`${colorCode}`}>
<Button
{...props}
px={8}
bg={useColorModeValue('#151f21', 'gray.900')}
color={'white'}
rounded={'md'}
_hover={{
transform: 'translateY(-2px)',
boxShadow: 'lg',
}}
onClick={() => setColorCode(colorList[randomColor()])}>
Click Me
</Button>
</Flex>
);
}
Support us
Made on the Internet by Achim Rolle and Contributors