Home | Barista Design System

Recently ordered

Most ordered

Ic Icons Co Colors Co Common UI styles Bu Button Tl Table Ch Chart If Input field Cd Card

Al Alert Ba Bar-indicator Br Breadcrumbs Bu Button Bu Button group Ca Card Ch Changelog Ch Chart Ch Checkbox Co Combobox Co Confirmation dialog Co Context dialog Co Copy to clipboard CT CTA card De Development Dr Drawer Ex Expandable panel Ex Expandable section Fi Filter field Fo Form field Fo Formatters Hi Highlight Ho How to contribute Ic Icon component In Indicator In Info group In Inline editor In Inline help In Input fields Ke Key-value list Li Links Li Linting Lo Loading distractor Mi Micro chart No Notification bar Ov Overlay Pa Pagination Pr Progress bar Pr Progress circle Ra Radio button Se Select Se Selection area Sh Show more Si Sidenav Sl Slider St Stepper St Styling Sw Switch Ta Table Ta Tabs Ta Tag Ti Tile Ti Timeline chart Ti Timeselector To Toast To Toggle button group Tr TreeTable Vi Viewport Resizer Co Colors Fo Font Ic Icons Sk Sketch Validation Bu Button alignment Co Common UI styles Em Empty states Er Error pages Fo Format units He Health indicator La Layout and responsive behavior Na Navigation Sa Save and cancel Th Theming Va Validate input

Do you want to help us brew?

That's awesome! We are happy to receive your ideas and feedback. Just contact us. If you are already a contributor please open a pull request in our internal repository.

Contribute now!

Getting started

Components

Barista Design System offers a collection of ready to use Angular components. Together with design guidelines and use cases, these ingredients are the basis for great user experience.

UI patterns

Ready for great user experience? Barista offers a large set of ingredients - mix them together to meet your use case! We recommend starting with the UI patterns.

FAQs

Questions? We put together a set of frequently asked questions for you.

Barista - the Dynatrace design system. Tailored to scale.