Close [x]

Magento Admin Pattern Library

Edit this page on GitHub

What is a design pattern?

A design pattern is an agreed-upon guide for creating buttons, scroll bars, forms, and other user interface elements. A design pattern also outlines best practices for interactive elements such as dropdown menus and sorting tools.

Why use patterns?

Patterns are important to building coherent and easy-to-use websites and applications. And they provide a common language and concrete reference for collaboration across all roles on the product team.

Patterns are captured in articles that dictate visual design, spatial relationships, placements, and interactions, using text, screenshots, diagrams and examples.

Browse the Design Pattern Library here:

Container

Static Content Container
Slide-out Panels, Modal Windows, and Overlays
Tabs

Controls

Buttons
Button Bar

Displaying and Dealing with Data

Tile
Filters
Data Table

Feedback to User

Progress Indicator

Getting User Input

Form Elements
Image Uploader
Date and Time Selector Use Default Config
Select From List

Graphics

Iconography

Links
Wizard

Templates

Address Form
Sign In Form

General

Accessibility Guidelines