import { Button, Icon, Div } from "react-native-magnus";

<Div row>
  <Button bg="blue500" h={40} w={40} rounded="circle">
    <Icon name="like1" color="white" />
  </Button>
  <Button bg="yellow500" h={40} w={40} rounded="circle" ml="md">
    <Icon name="star" color="white" />
  </Button>
  <Button bg="red100" h={40} w={40} rounded="circle" ml="md">
    <Icon name="heart" color="red500" />
  </Button>
</Div>;

<Div row flexWrap="wrap">
  <Button
    mt="lg"
    px="xl"
    py="lg"
    bg="white"
    borderWidth={1}
    borderColor="red500"
    color="red500"
    underlayColor="red100"
  >
    Contact Us
  </Button>
  <Button
    mt="lg"
    ml="lg"
    px="xl"
    py="lg"
    bg="red500"
    color="white"
    underlayColor="red600"
  >
    Contact Us
  </Button>
  <Button
    mt="lg"
    px="xl"
    py="lg"
    bg="green700"
    color="white"
    suffix={<Icon name="arrowright" ml="md" color="white" />}
  >
    Contact Us
  </Button>
  <Button
    mt="lg"
    ml="md"
    px="xl"
    py="lg"
    bg="blue500"
    rounded="circle"
    color="white"
    shadow={2}
    prefix={<Icon name="caretright" mr="sm" color="white" />}
  >
    Play now
  </Button>
</Div>

<Button
  loading={true}
  block
  bg="blue600"
  suffix={<Icon name="search" color="white" fontFamily="Feather" />}
  p={12}
  color="white"
  rounded="circle"
  mt="lg">
  Loading State
</Button>
<Button
  block
  prefix={
    <Icon
      position="absolute"
      left={8}
      name="search"
      color="white"
      fontFamily="Feather"
    />
  }
  bg="blue600"
  p={12}
  color="white"
  rounded="circle"
  mt="lg">
  Button with Left Icon
</Button>
<Button
  block
  suffix={
    <Icon
      position="absolute"
      right={8}
      name="arrowright"
      color="white"
    />
  }
  bg="blue600"
  p={12}
  color="white"
  rounded="circle"
  mt="lg">
  Button with Right Icon
</Button>

<Div row justifyContent="center" alignItems="center" mt="xl">
  <Button
    bg="white"
    borderless
    shadow="sm"
    h={40}
    w={40}
    rounded="circle"
    alignSelf="center"
  >
    <Icon name="repeat" color="red500" fontFamily="Feather" />
  </Button>
  <Button
    bg="red500"
    h={60}
    w={60}
    mx="xl"
    rounded="circle"
    shadow="md"
    borderless
  >
    <Icon name="play" color="white" fontFamily="Feather" />
  </Button>
  <Button
    bg="white"
    borderless
    shadow="sm"
    h={40}
    w={40}
    rounded="circle"
    alignSelf="center"
  >
    <Icon name="skip-forward" color="red500" fontFamily="Feather" />
  </Button>
</Div>

<Button block color="white" p="none">
  <Div
    p="lg"
    flex={1}
    bgImg={{
      uri:
        "https://images.unsplash.com/photo-1477346611705-65d1883cee1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80",
    }}
  >
    <Text color="white" fontSize="3xl" fontWeight="bold">
      McLeod Ganj
    </Text>
    <Text color="white" fontSize="sm" mt="sm" opacity={0.9}>
      McLeod Ganj is a suburb of Dharamshala in Kangra district of Himachal
      Pradesh, India.
    </Text>
    <Div row mt="xl">
      <Text color="white">Explore</Text>
      <Icon name="arrowright" color="white" ml="md" />
    </Div>
  </Div>
</Button>