Box

A layout component for controlling width, margin, padding, colour and shadows.

children

Box content

Box content

width

white

color

black

padding

boxShadow

borderRadius

small

medium

circle

import * as React from "react";
import { Box } from "@nulogy/components";

export default () => {
  return (
    <Box width="100%" bg="white" color="black">
      Box content
    </Box>
  );
}

import * as React from "react";
import { Box } from "@nulogy/components";

export default () => {
  return (
    <Box width="100%" bg="white" color="black">
      Box content
    </Box>
  );
}

Props

Name	Type	Description
children	react node	The elements to build the breadcrumbs out of. Can be a Link or Text.
width	string	A width, in any unit.
bg	enum	A background colour, chosen from the theme. A unique value can also be provided.
color	enum	A text colour, chosen from the theme. A unique value can also be provided.
padding	enum	A padding, chosen from the theme. A unique value can also be provided.
boxShadow	enum	A box shadow size, chosen from the theme. A unique value can also be provided.
borderRadius	enum	A border radius, chosen from the theme. A uniique value can also be provided.

The Box component has access to space, colour, layout, border, boxShadow, textAlign, and position style props. See the style prop documentation for a full list of available props.