# Thoughts on Atom Building in the Pattern Library

DevFeed: [Thoughts on Atom Building in the Pattern Library](<https://devfeed.tech/articles/thoughts-on-atom-building-in-the-pattern-library-27944.md>)

Original publisher: [Read original article](<https://tech.trivago.com/post/2016-06-16-thoughts-on-atom-building-in-the-pattern-library/>)

Author: Ian Devlin Lead Developer; Working; Accessibility Follow

Published: 2016-06-16T00:00:00Z

Content type: opinion

Language: en

Sources: [Trivago](<https://devfeed.tech/sources/trivago.md>)

Topics: [Library](<https://devfeed.tech/topics/library.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [aria](<https://devfeed.tech/tags/aria.md>), [building](<https://devfeed.tech/tags/building.md>), [complexity](<https://devfeed.tech/tags/complexity.md>), [design](<https://devfeed.tech/tags/design.md>), [flexibility](<https://devfeed.tech/tags/flexibility.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [id](<https://devfeed.tech/tags/id.md>), [library](<https://devfeed.tech/tags/library.md>), [patterns](<https://devfeed.tech/tags/patterns.md>), [templates](<https://devfeed.tech/tags/templates.md>), [thoughts](<https://devfeed.tech/tags/thoughts.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>)

## AI overview

A personal reflection on designing reusable UI atoms in trivago's Twig-based Pattern Library. Using a button as an example, the article examines the trade-off between an atom's simplicity and the flexibility needed for text, classes, event listeners, IDs, attributes, WAI-ARIA attributes, and disabled states.

## Source excerpt

At trivago we are building and using a Pattern Library which is based on Brad Frost's Pattern Lab adapted to our needs; our patterns are written in Twig. This Pattern Lab is based around Brad's Atomic Design, which is also something that we are embracing.