Components

Box

Box is the foundational building block for all components in Spor.

Code examples

<Box backgroundColor="mint">
  A simple box
</Box>

Box is a pretty special component. You can think of it as a <div /> that you can style using props and design tokens.

import { Box } from "@vygruppen/spor-react";

The base element in our design system. Used to make anyting based on design tokens. Can be thought of as a div.

There are a lot of props to use. Use autocompletion for a complete list.

Name	Type	Description
`backgroundColor`	`string`
`borderRadius`	`"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "round"`
`as`	`string \| React.ComponentType`	Lets you change the underlying DOM element rendered
`color`	`string`	Text color
`boxShadow`	`"none" \| "sm" \| "md" \| "lg"`
`height`	`string`
`width`	`string`
`margin`	`number`	Also marginTop, marginRight, marginBottom, marginLeft, marginX and marginY (marginHorizontal and marginVertical in React Native)
`padding`	`number`	Also paddingTop, paddingRight, paddingBottom, paddingLeft, paddingX and paddingY (paddingHorizontal and paddingVertical in React Native)
`zIndex`	`"hide" \| "base" \| "docked" \| "dropdown" \| "sticky" \| "banner" \| "overlay" \| "modal" \| "popover" \| "skipLink" \| "toast" \| "tooltip"`