Chakra UI Actions - Horizon UI
Button Action#
function ButtonAction() {return (<Flex justifyContent="center" alignItems="center" w="100%"><Flex direction="column" align="start" me="auto"><Textcolor={useColorModeValue("#1B2559", "white")}fontSize="md"me="6px"fontWeight="700">January, 17 2022</Text><Textcolor={useColorModeValue("#A3AED0", "white")}fontSize="sm"fontWeight="500">SIM16-#024215</Text></Flex><Textms="auto"color={useColorModeValue("#1B2559", "white")}fontSize="sm"me="14px"fontWeight="700">$839</Text><Buttoncolor={useColorModeValue("brand.500", "white")}fontWeight="500"borderRadius="50px"bg={useColorModeValue("#F4F7FE", "brand.400")}px="24px"fontSize="sm"fontWeight="700">View PDF</Button></Flex>)}
import ButtonAction from "components/actions/ButtonAction"
<ButtonActiondate="January, 17 2022"name="SIM16-#024215"sum="$839"actionName="View PDF"/>
Set Up#
function SetUp() {return (<FlexjustifyContent="space-between"flexDirection={{ base: "column", md: "row" }}alignItems="center"w="100%"><Textcolor={useColorModeValue("#1B2559", "white")}fontSize="md"me="6px"fontWeight="700"mb={{ base: "10px", md: "0px" }}>Authenticator App</Text><Flexalign="center"flexDirection={{ base: "column", md: "row" }}mb={{ base: "20px", md: "0px" }}><Textms="auto"color={useColorModeValue("#A3AED0", "white")}fontSize="md"me={{ base: "10px", md: "30px" }}fontWeight="500">Not configured</Text><Buttonpx="24px"bg={useColorModeValue("transparent", "brand.400")}border={useColorModeValue("1px solid", "0px solid")}borderColor={useColorModeValue("#E9EDF7", "transparent")}fontSize="md"fontWeight="500">Set up</Button></Flex></Flex>)}
import SetUp from "components/actions/SetUp"
<SetUp name="Authenticator App" value="Not configured" actionName="Set up" />
Transaction#
function Transaction() {return (<Flex justifyContent="center" alignItems="center" w="100%"><Flexjustify="center"align="center"h="42px"borderRadius="60px"me="6px"w="42px"bg={useColorModeValue("#F4F7FE", "whiteAlpha.100")}><CheckIcon color={useColorModeValue("brand.400", "white")} /></Flex><Flex direction="column" align="start" me="auto"><Textcolor={useColorModeValue("#1B2559", "white")}fontSize="sm"me="6px"fontWeight="700">Bill & Taxes</Text><Textcolor={useColorModeValue("#A3AED0", "white")}fontSize="xs"fontWeight="500">Today, 16:36</Text></Flex><Textms="auto"color={useColorModeValue("#1B2559", "white")}fontSize="sm"me="6px"fontWeight="700">-$154.50</Text></Flex>)}
import Transaction from "components/actions/Transaction"
<Transaction name="Bill & Taxes" date="Today, 16:36" sum="-$154.50" />