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

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?

What counts as a destructive action?

How do I order action buttons?

When do I use validation to disable buttons?

When do I stack buttons vertically vs horizontally?

When should I use mw-ui-big?

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?

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

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

When should I use flyouts?

When do I use actionable versus informational flyouts?

Can flyouts have CTA buttons?

What buttons belong in an action bar?

What buttons do not belong in an action bar?

Contents