{{ aspExample({ code: &quot;&lt;button type=\&quot;submit\&quot; class=\&quot;button button&#8211;start\&quot;&gt;Send sign in details&lt;/button&gt;&quot;, nunjucks: &quot;{{ aspButton({<br />
  modifier: \&quot;start\&quot;,<br />
  type: \&quot;submit\&quot;,<br />
  text: \&quot;Start\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92ae12942e&quot;, url: &quot;&quot; }) }}


<p>Use the default button for the most important action on a page. For example, the ‘Start’ button on a form’s start page. Only use one primary button per page to guide users to the main action.</p>



<h2 class="wp-block-heading">Button as a link</h2>


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspButton({<br />
  modifier: \&quot;start\&quot;,<br />
  href: \&quot;#\&quot;,<br />
  text: \&quot;Start now\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;66e01a32f16dc&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading" id="when-to-use-this-component">Disabled button</h2>



<p>Disabled buttons have poor contrast and can confuse some users, so avoid them if&nbsp;possible.</p>



<p>Only use disabled buttons if research shows it makes the user interface easier to&nbsp;understand. disabled buttons should be used when an action is possible but not available, and should be styled differently from active buttons.</p>


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspButton({<br />
  modifier: \&quot;start\&quot;,<br />
  type: \&quot;submit\&quot;,<br />
  disabled: true,<br />
  text: \&quot;Start\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;6729f88e89cca&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading" id="when-to-use-this-component">When to use this component</h2>



<p>Use the button component to help users carry out an action like starting an application or saving their information.</p>



<h2 class="wp-block-heading" id="how-it-works">How it works</h2>



<p>Write button text in sentence case, describing the action it performs. For example:</p>



<ul class="wp-block-list">
<li>‘Start now’ at the&nbsp;start of the service</li>



<li>‘Send sign in details’ to an account a user has already created</li>



<li>‘Log out’ when a user is signed in to an account</li>
</ul>



<p>You may need to include more or different words to better describe the action. For example, ‘Send sign in details’.</p>



<p>Align the primary action button to the left edge of your form.</p>



<h2 class="wp-block-heading" id="secondary-buttons">Secondary button</h2>



<p>The secondary button is for less important actions and usually sits next to the primary button.</p>



<p>Avoid adding multiple secondary buttons to one page, as it can confuse users. Instead, try to simplify or spread content across multiple pages.</p>


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspButton({<br />
  modifier: \&quot;secondary\&quot;,<br />
  type: \&quot;button\&quot;,<br />
  text: \&quot;Secondary action\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;6729f88e89d02&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading" id="warning-buttons">Warning button</h2>



<p>Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.</p>


 {{ aspExample({ code: &quot;&lt;button type=\&quot;submit\&quot; class=\&quot;button button&#8211;warning\&quot;&gt;Send sign in details&lt;/button&gt;&quot;, nunjucks: &quot;{{ aspButton({<br />
  modifier: \&quot;warning\&quot;,<br />
  type: \&quot;reset\&quot;,<br />
  text: \&quot;Delete\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92ae1294a4&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Primary button</h2>



<p>The blue button is not recommended for new designs. It has been used in some applications such as Formation Admin, but its purpose is unclear.</p>



<p>It was previously considered a secondary button but is coded as a primary button. Its future use is under review.</p>


 {{ aspExample({ code: &quot;&lt;button type=\&quot;submit\&quot; class=\&quot;button button&#8211;primary\&quot;&gt;Send sign in details&lt;/button&gt;&quot;, nunjucks: &quot;{{ aspButton({<br />
  modifier: \&quot;primary\&quot;,<br />
  type: \&quot;button\&quot;,<br />
  text: \&quot;Download\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92ae129483&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading">Status of development</h2>



<p>The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.</p>


<br />
 {{ aspTable({<br />
  head: [<br />
    { text: &#039;Development criteria&#039;}, <br />
    { text: &#039;Status&#039;}<br />
  ],<br />
  rows: [<br />
    {<br />
      cells: [<br />
        { text: &#039;WCAG 2.2 compliant&#039;},<br />
        { html: &#039;&lt;span class=&quot;status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;WCAG 2.1 compliant&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;green&quot;&gt;Completed&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;HTML / Nunjucks version&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;green&quot;&gt;Completed&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;Figma version&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;M365 versions&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&quot;&gt;Not started&lt;/span&gt;&#039;}<br />
      ]<br />
    },<br />
    {<br />
      cells: [<br />
        { text: &#039;Documentation&#039;},<br />
        { html: &#039;&lt;span class=&quot;status status&#8211;yellow&quot;&gt;In progress&lt;/span&gt;&#039;}<br />
      ]<br />
    }<br />
  ]<br />
}) }}<br />
<br />