Button

import { Button } from '@zeal-ui/core';

<Container type="col">
    <Button>Primary Button</Button>
    <Button color="secondary">Secondary Button</Button>
    <Button color="accent">Accent Button</Button>
</Container>;

<Button floating bottom="1rem" right="1rem">
    Button Floating
</Button>;

const ButtonStyled = styled(Button)`
  display: flex;
  flex-direction: row;
  align-items: center;

  .icon{
    border-radius: 50%;
    margin-right: 0.5rem;
  }

  .text{
    margin: 0rem;
  }
`;

render(
    <ButtonStyled width="10rem" height="2rem" color="warning">
        <Image src="/phone.svg" alt="phone" width="1.5rem" height="1.5rem" className="icon" />
        <Text>Button with Icon</Text>
    </ButtonStyled>,
);