import El from "ui-box-plus";

const Button = (props) => (
    <El
      is="button" // Strings are taken 'as is'
      h="32px" // Most CSS shorthand notations are supported
      mb // Booleans are interpreted as 1 grid unit
      p={2} // Numbers are interpreted as number of grid units
      background={theme => theme.colors.warning} // Functions are given the styled component theme
      w={{desktop: 8, mobile: "100%"}} // Provide an object to handle different devices
      {...props}
    />
);

const Example = () => (
  <Button disabled mt={4}>Hi</Button>
);

import { useDeviceInfo } from "ui-box-plus";

const { width, device } = useDeviceInfo();

interface DeviceInfo {
  width: number;
  device: "mobile" | "tablet" | "desktop" | "hd";
}