In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Beta V1 Release

Airbus Design System was released almost a year ago. It is the official single source of truth for digital products and services for Airbus.

What's new?

V1.0.0-Beta 

Release note
Design

Make sure to use the design guidelines on the documentation: brand.airbus.com/design-system

  • Data Table documentation: Page structure reshaped 
  • Data Visualisation documentation: New page + Principles
  • Best practices section added to the documentation pages: Banner, Breadcrumb, Chat, Checkbox, Combo box, Date & time Picker, Empty state, Modal, Pagination, Progress bar, Radio button, Select

 

  • New components variants or items: Chip 32px variant, Radio button mobile, Checkbox mobile, Cover mobile, Header transparent mobile, Transferlist items, Overlay, Dropdown in Header, Accordion reverse, Group Button reverse, Range slider reverse, Date & time picker reverse, Combo Box reverse
  • Smart layout improved: Input, Combobox, Data Table, Banner, Footer
  • Naming: Header changed for Blue B2B, White B2E, Transparent B2C+ global harmonization
  • States: Input field + Combo box + Select Active and Focus states replaced by Active Focus, New disable state without transparency, Avatar hover state.
  • Layer styles: Naming improvements.
  • Text styles: Naming improvements.
  • Skywise UI kit available: Please note Skywise UI kit is not as advanced as Airbus’.
Development

We decided to publish this beta in accordance with the priorities gathered on several projects, and the accomplishment of the following steps.

  • New CSS architecture based on CSSinJS approach, with the long term vision that it could evolve to a framework agnostic component architecture.
  • Consistent CSS, React and Angular components, based on the same design tokens, and evolving in the same code base.
  • Storybook as a unified documentation system and development environment.
  • Retro compatibility for React v0.x components (@horizon/component-react.

 

You can see the updated list of available components down below ⬇️  

Components status
Component Brand Center UI kit CSS React Angular
Accordion
Avatar
Badge
Banner
Bottom sheet
Breadcrumb
Button
Card
Chat
Checkbox
Chip
Combo box
Container
Cover
Data table*
Data visualisation
Date & time picker
Empty state
Footer
Header
Input field
Link
Loading
Media
Modal
Pagination
Panel
Popover
Progress bar
Radio button
Range slider
Rating
Select
Skeleton
Stepper
Tab
Textarea
Toggle
Tooltip
Transfer list

*Function available according to current technology for the data table.

React: Sorting and pagination

Angular: Sorting

How to adopt it?
V1 Release Plan
Code & Design assets

Request code and design assets for creating user interfaces.

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top