Chakra UI Actions - Horizon UI

Button Action#

function ButtonAction() {
return (
<Flex justifyContent="center" alignItems="center" w="100%">
<Flex direction="column" align="start" me="auto">
<Text
color={useColorModeValue("#1B2559", "white")}
fontSize="md"
me="6px"
fontWeight="700"
>
January, 17 2022
</Text>
<Text
color={useColorModeValue("#A3AED0", "white")}
fontSize="sm"
fontWeight="500"
>
SIM16-#024215
</Text>
</Flex>
<Text
ms="auto"
color={useColorModeValue("#1B2559", "white")}
fontSize="sm"
me="14px"
fontWeight="700"
>
$839
</Text>
<Button
color={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"
<ButtonAction
date="January, 17 2022"
name="SIM16-#024215"
sum="$839"
actionName="View PDF"
/>

Set Up#

function SetUp() {
return (
<Flex
justifyContent="space-between"
flexDirection={{ base: "column", md: "row" }}
alignItems="center"
w="100%"
>
<Text
color={useColorModeValue("#1B2559", "white")}
fontSize="md"
me="6px"
fontWeight="700"
mb={{ base: "10px", md: "0px" }}
>
Authenticator App
</Text>
<Flex
align="center"
flexDirection={{ base: "column", md: "row" }}
mb={{ base: "20px", md: "0px" }}
>
<Text
ms="auto"
color={useColorModeValue("#A3AED0", "white")}
fontSize="md"
me={{ base: "10px", md: "30px" }}
fontWeight="500"
>
Not configured
</Text>
<Button
px="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%">
<Flex
justify="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">
<Text
color={useColorModeValue("#1B2559", "white")}
fontSize="sm"
me="6px"
fontWeight="700"
>
Bill & Taxes
</Text>
<Text
color={useColorModeValue("#A3AED0", "white")}
fontSize="xs"
fontWeight="500"
>
Today, 16:36
</Text>
</Flex>
<Text
ms="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" />

Horizon UI © 2021-2023 Copyright. All Rights Reserved.

  • Blog
  • License