Primitives - index - Components - Atlassian Design System (2024)

Installation

Package installation information
Installyarn add @atlaskit/primitives
SourceBitbucket.org, (opens new window)
npm@atlaskit/primitives, (opens new window)
Bundleunpkg.com, (opens new window)

Primitives are a new type of component for layouts, styling, and the placement of elements. They actas building blocks to compose different parts of the user experience, from the smallest designdecisions (for example, the spacing around an icon) to larger layout decisions (for example, how apage is structured).

Primitives are powered by design tokens and make it easier to apply design decisions. This reducescognitive overhead, improves productivity and prevents accidents or mistakes.

Available primitives

Primitives are used together to compose complex designs not otherwise implemented directly in theDesign System. Currently, three layout primitive components are available:

  • in a container (see box)
  • horizontally (see inline)
  • vertically (see stack)

Additional layouts not well-expressed by these core primitives can also be composed using:

Interactive primitives can be used to build:

Installation

To install primitive components, add @atlaskit/primitives as a dependency on your project:

$ yarn add @atlaskit/primitives

Use primitives for composing layouts. Primitives are not currently available in Figma, so the firststep 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 isuseful.

You might like to think first about breaking down a page into Box containers, identifying largerpieces of a design that function in a similar manner or fulfill a singular purpose in a layout andgrouping them together under a Box.

Primitives - index - Components - Atlassian Design System (1)

The behavior within and around these boxes can then be broken down into their horizontal Inlineand vertical Stack components.

The ESLint rule

use-primitives offers suggestions for possible primitives to apply in a layout.

Primitives - index - Components - Atlassian Design System (2)Primitives - index - Components - Atlassian Design System (3)

Related

Was this page helpful?

We use this feedback to improve our documentation.

Primitives - index - Components - Atlassian Design System (2024)

FAQs

What are the components of design system primitive? ›

Primitives are a new type of component for layouts, styling, and the placement of elements. They act as 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).

What are design primitives? ›

Primitives are composable components that provide opinionated solutions to common design and layout problems. Primitive components are a new type of component that assist with layout and the visual placement of child elements.

What are components in a design system? ›

What are components in a design system? Design components are the functional factors of a user interface (UI). Components are derived from design elements that come together after the whole design thinking process. Such as color, typography, and spacing.

What are components Atlassian? ›

Components are subsections of a project. They are used to group issues within a project into smaller parts. For example, teams may use components to group issues that describe work on specific data objects, services, plug-ins, or APIs within their project. You can set a default assignee for a component.

What are the 5 components of design? ›

The elements are your tools or raw materials, much like paints are the basics to a painter. The five elements of interior design include space, line, form, color, and texture. The principles of design relate to how you use these elements and are balance, emphasis, rhythm, proportion and scale, and harmony and unity.

What are the 3 major components of the system design phase? ›

In successful systems design, three main components must be considered and managed effectively. These are quality, timeliness and cost-effectiveness.

What are UI primitives? ›

Some kind of UI entity that can be used to build more sophisticated UI constructs. For example a hypertext link can be thought of as a UI primitive, as can some type of 'out of the box' border for a UI element that is provided by some kind of UI framework.

What are the primitives of a model? ›

A Primitive Model is a 3D base shape that can be added to a 3D document. Primitives allow for the dynamic procedural generation of various simple 3D geometries from within a 3D Document. The Primitive Model Types available are: Cube (will be added by default)

What is the concept of primitives? ›

In mathematics, logic, philosophy, and formal systems, a primitive notion is a concept that is not defined in terms of previously-defined concepts. It is often motivated informally, usually by an appeal to intuition and everyday experience.

What is the Atlassian design system? ›

Atlassian design system is a platform used to create simple, intuitive, and beautiful user experience tools. In simple terms, the Atlassian design system is used to create software development and collaboration tools. The likes of Jira and Trello are just some of the examples of tools created with Atlassian.

What are the 7 elements of design? ›

The 7 Elements of Design
  • Line.
  • Shape.
  • Form.
  • Value.
  • Color.
  • Texture.
  • Space.
  • Back to Design Basics Home.

How to group design system components? ›

Design System- Grouping and naming components
  1. Visual identity: brand color, images, typography ….
  2. Principles: Voice and tone, brand values, objectives…
  3. Best practices: Accessibility, UX, training documents….
  4. Components and patterns: the building block of digital products.
Jan 11, 2024

What is the difference between labels and components in Atlassian? ›

Labels can be used worldwide, while Components work better for grouping within projects. Consistency and user friendliness are ensured when an admin sets the component. Additionally, it makes sure that the team consistently groups the tasks that make up a project.

What is Atlassian structure? ›

Structure for Jira helps Atlassian's largest customers visualize, track and manage progress across Jira projects and teams. It does this with adaptable, user-defined, issue hierarchies presented in a familiar spreadsheet-like view of Jira issues.

How to define components in Jira? ›

Create a Jira component
  1. In your project sidebar, select Components.
  2. Next to Create component, check that the project is using Jira components and not Compass components. ...
  3. Select Create component.
  4. Fill out the new component's information. ...
  5. Select Save.

What is a primitive design? ›

The primitive style is best represented by practical items, hand-made, of an antique age, and with a worn appearance. Primitive wood is unrefined and plain, with the grain on show. Elements of Americana are often detectable.

What are the 4 types of system design? ›

What are the 4 types of system design?
  • Monolithic Architecture: Simplifying Complexity. ...
  • Client-Server Model: Serving Up Solutions. ...
  • Microservices Architecture: Building Blocks of Innovation. ...
  • Service-Oriented Architecture (SOA): The Supermarket of Solutions.
Apr 29, 2024

What are the 4 parts of design? ›

The basic elements of design are:
  • Color: Color helps establish a mood for your composition. ...
  • Line: Line refers to the way that two points in space are connected. ...
  • Value: In design, value refers to the lightness or darkness of a color. ...
  • Space: Making proper use of space can help others view your design as you intended.
Jun 7, 2021

What are the three major components of work system design? ›

The major components of work system design are job design, process (methods) analysis and work measurement. Job design determines the specific work activities of each employee or type of employee. Process analysis focuses on the detailed steps of doing a particular job.

Top Articles
Crypto Arbitrage: Everything You Need to Know to Profit
How to Create a Successful Forex Trading Plan in 2022 - Trade the Day
Ups Customer Center Locations
Ups Dropoff Location Near Me
Tesla Supercharger La Crosse Photos
Archived Obituaries
Erika Kullberg Wikipedia
Jonathon Kinchen Net Worth
Free Atm For Emerald Card Near Me
Obituary (Binghamton Press & Sun-Bulletin): Tully Area Historical Society
Nikki Catsouras Head Cut In Half
Bernie Platt, former Cherry Hill mayor and funeral home magnate, has died at 90
6th gen chevy camaro forumCamaro ZL1 Z28 SS LT Camaro forums, news, blog, reviews, wallpapers, pricing – Camaro5.com
Mini Handy 2024: Die besten Mini Smartphones | Purdroid.de
Fear And Hunger 2 Irrational Obelisk
Nyuonsite
Unlv Mid Semester Classes
979-200-6466
Northeastern Nupath
Watch The Lovely Bones Online Free 123Movies
Craigslist Southern Oregon Coast
Morristown Daily Record Obituary
A Person That Creates Movie Basis Figgerits
Nsa Panama City Mwr
Certain Red Dye Nyt Crossword
MyCase Pricing | Start Your 10-Day Free Trial Today
Trivago Myrtle Beach Hotels
Jesus Calling Feb 13
Pokémon Unbound Starters
Select The Best Reagents For The Reaction Below.
Vlacs Maestro Login
My Dog Ate A 5Mg Flexeril
DIY Building Plans for a Picnic Table
Helloid Worthington Login
Why Are The French So Google Feud Answers
3 Bedroom 1 Bath House For Sale
Joplin Pets Craigslist
Why Gas Prices Are So High (Published 2022)
Craigslist Summersville West Virginia
Tokyo Spa Memphis Reviews
MSD Animal Health Hub: Nobivac® Rabies Q & A
B.C. lightkeepers' jobs in jeopardy as coast guard plans to automate 2 stations
Honkai Star Rail Aha Stuffed Toy
Tropical Smoothie Address
855-539-4712
Rite Aid | Employee Benefits | Login / Register | Benefits Account Manager
18 Seriously Good Camping Meals (healthy, easy, minimal prep! )
Definition of WMT
Cars & Trucks near Old Forge, PA - craigslist
Bones And All Showtimes Near Emagine Canton
Latest Posts
Article information

Author: Zonia Mosciski DO

Last Updated:

Views: 5658

Rating: 4 / 5 (71 voted)

Reviews: 86% of readers found this page helpful

Author information

Name: Zonia Mosciski DO

Birthday: 1996-05-16

Address: Suite 228 919 Deana Ford, Lake Meridithberg, NE 60017-4257

Phone: +2613987384138

Job: Chief Retail Officer

Hobby: Tai chi, Dowsing, Poi, Letterboxing, Watching movies, Video gaming, Singing

Introduction: My name is Zonia Mosciski DO, I am a enchanting, joyous, lovely, successful, hilarious, tender, outstanding person who loves writing and wants to share my knowledge and understanding with you.