{{ 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 button. modifier: start\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92ae12942e&quot;, url: &quot;&quot; }) }}


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


 {{ aspExample({ code: &quot;&quot;, nunjucks: &quot;{{ aspButton({<br />
  modifier: \&quot;start\&quot;,<br />
  href: \&quot;#\&quot;,<br />
  text: \&quot;Start button as a link. modifier: start\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;66e01a32f16dc&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 buttons</h2>



<p>Use secondary buttons for secondary calls to action on a page.</p>



<p>Pages with too many calls to action make it hard for users to know what to do next. Before adding lots of secondary buttons, try to simplify the page or break the content down across multiple pages.</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;Primary button. modifier: primary\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92ae129483&quot;, url: &quot;&quot; }) }}


<h2 class="wp-block-heading" id="warning-buttons">Warning buttons</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;Warning button. modifier: warning\&quot;<br />
}) }}&quot;, title: &quot;&quot;, id: &quot;65a92ae1294a4&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 />