Design/Archive/Wikimedia Foundation Design/Agora Control Library/Behavior



Buttons

How do I know what button style to use?

How do i know which color (function) button to use?

Can I use multiple primary CTA buttons in one user flow?

Can I use multiple secondary CTA buttons in one user flow?

How do I order action buttons?

When do I use validation to disable buttons

When do I stack buttons vertically vs horizontally

Form Fields

When do I use different fields types (normal, validated, password, calendar, single line, multi-line)

How do I know how long a form field should be?

When do I stack form fields vs keeping them on the same line?

When do I include buttons and form fields on the same line vs stacking?

How do I know when to use error text vs informational flyouts?

Dialogs

How do I determine if I use a modal or modeless dialog?

How do I know if my dialog should have a close button

Flyout/Popover

When should I use flyouts?

When do I use Actionable vs Informational flyouts?

Can Flyouts have CTA buttons?

Action Bar

What buttons belong in an action bar?

What buttons do not belong in an action bar?