Skip to end of metadata
Go to start of metadata
Pattern: Buttons

When to use this pattern


  • As a control to perform a function on a form, container, or page.

Example

How It Looks

Primary Button: CSS class btn btn-primary
Secondary Button: CSS class btn btn-default

How It Works

  • The Primary Button performs the primary (default) action of the form, container, or page.
  • Only one Primary Button should be present.
  • The Primary Button is disabled until the function it performs is eligible to occur.
  • When used in collections as forms, multiple Primary Buttons may be used when processing a queue of similar tasks (e.g., assigning students to registration windows) to help provide visual feedback about progress.
  • Use to reflect the most common or important action on the page, even if the primary purpose of the page requires further action (e.g., "Continue").
  • This button should be accompanied by an alternate escape action (e.g., a "Cancel" button) and may be supported by multiple tasks triggered by Secondary Buttons. 
  • UXI-131 - Data cannot be retrieved due to an unexpected error

 

 

 

 

 

 

  • No labels