| Install | yarn add @atlaskit/primitives |
|---|---|
| Source | Bitbucket.org |
| npm | @atlaskit/primitives |
| Bundle | unpkg.com |
Primitives are a new type of component for layouts and the placement of elements. They act as simple building blocks to compose different parts of the user experience, from the smallest design decisions (for example, the spacing around an icon) to larger layout decisions (for example, how a page is structured).
Primitives are powered by design tokens and add a layer of ergonomics and accessibility to token application. Tokens are great at describing the what of a design decision; primitives make it easier to reason about the when and how. This reduces cognitive overhead, improves productivity and prevents accidents or mistakes.
Each primitive is designed to have a single responsibility, and it should be immediately clear where and when each primitive should be used. However, they are also flexible enough that they should be able to be used together to compose complex designs not otherwise implemented directly in the Design Systems.
Currently, three core primitive components are available - Box, Inline and Stack. A large amount of layout problems can be reduced to laying out content:
Additional layouts not well-expressed by these core primitives can also be composed using:
To install primitive components, add @atlaskit/primitives as a dependency on your project:
$ yarn add @atlaskit/primitivesUse primitives for composing layouts. Primitives are not currently available in Figma, so the first step in implementing primitive components is identifying where they might fit in a given design. This involves breaking down a design into its core layout components to as granular level as is useful.
You might like to think first about breaking down a page into Box containers,
identifying larger pieces of a design that function in a similar manner or fulfill a singular purpose
in a layout and grouping them together under a Box.
The behavior within and around these boxes can then be broken down into their horizontal Inline and vertical Stack components.
Was this page helpful?
We use this feedback to improve our documentation.