• Andrew C, almost 5 years ago

    Atomic design helps somewhat with things like this. The header bar, bottom bar (if any) and general sizing of the modal body (including scroll) are atoms and molecules. The modal frame is an organism based on these constituent component. The form you'll nest inside the modal is ALSO an organism (comprised of buttons, inputs, labels, errors, etc). Together they create a general template (or pattern). And the final piece with real elements is a page.

    You can have multiple modal organisms if your app calls for that. That's OK... but question why you need two instead of one. Atomic design isn't perfect by any means (it's taxonomy is quite clumsy) but it's a common language to help talk through front-end hierarchy like this.

    1 point