View API

API reference for the View component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.

Demos

For usage examples, visit the component demo page: View

Import

import { View } from '@soroush.tech/design-system/View'

Props

`bg`

Resolves against theme.background.

Token	Dark source
`"backdrop"`	`carbonBlack[900]` + 80% opacity
`"modal"`	`kineticSurface[800]`
`"primary"`	`kineticSurface[900]`
`"secondary"`	`kineticSurface[700]`
`"paper"`	`kineticSurface[800]`
`"terminal"`	`kineticSurface[900]`
`"grid"`	`kineticSurface[800]`

`opacity`

Raw CSS opacity value (0-1).

`cursor`

CSS cursor - controls the mouse pointer style. Accepts any valid CSS cursor value.

Common values: "pointer" · "default" · "move" · "not-allowed" · "wait" · "grab" · "text"

<View cursor="pointer" onClick={handleClick}>
  clickable
</View>

`order`

CSS order for placing a flex/grid item out of source order. Accepts a single value or a responsive array.

// First on mobile, last in a 2-col layout, first again on wide screens
<View order={[0, 1, 1, 0]}>logo</View>

Styled-system props

Space - `theme.space`

Prop	Shorthand for
`m` `mt` `mr` `mb` `ml` `mx` `my`	margin + sides
`p` `pt` `pr` `pb` `pl` `px` `py`	padding + sides
`gap` `rowGap` `columnGap`	gap + axes

Key	Value
`0`	0
`0.5`	4px
`1`	8px
`1.5`	12px
`2`	16px
`3`	24px
`4`	32px
`5`	40px
`6`	48px
`7`	56px
`8`	64px
`"auto"`	auto

Layout

width · height · minWidth · minHeight · maxWidth · maxHeight · display · overflow · overflowX · overflowY · verticalAlign · aspectRatio

Border - `theme.radii`

border · borderWidth · borderStyle · borderColor · borderRadius · borderTop · borderRight · borderBottom · borderLeft · borderX · borderY

Radii: "sm" (4px) · "md" (8px) · "lg" (16px)

Position

position · zIndex · top · right · bottom · left

HTML attributes

Extends HTMLAttributes<HTMLElement>. Standard attributes (style, className, onClick, data-*, aria-*) pass through.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.