<commit_before><section class="pl-section" id="actionToolbar">
  <h3><a href="#actionToolbar">Action Toolbar</a></h3>
  <p>
    Use <code>.action-toolbar</code> on an <code>&lt;ol&gt;</code> or <code>&lt;ul&gt;</code> to
    get a menu style toolbar. using the <code>overflowMenu</code> widget, as seen bellow, allowes
    for dynamic creation of a &quot;more&quot; dropdown link when the toolbar is too narrow.
  </p>

  <div class="pl-example">
    {{> components/examples/action-toolbar }}
  </div>
  <pre>
    <code class="html">
&lt;div class=&quot;action-area&quot;&gt;
  &lt;ol class=&quot;action-toolbar&quot; data-bind=&quot;widget: 'overflowMenu'&quot;&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-play'&gt;&lt;/svg&gt; start&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-stop'&gt;&lt;/svg&gt; stop&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot; disabled&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-stop'&gt;&lt;/svg&gt; disabled&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-refresh'&gt;&lt;/svg&gt; restart&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-archive'&gt;&lt;/svg&gt; archive&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-snapshot'&gt;&lt;/svg&gt; snapshot&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-disaster-recovery'&gt;&lt;/svg&gt; recovery&lt;/button&gt;&lt;/li&gt;
  &lt;/ol&gt;
&lt;/div&gt;
    </code>
  </pre>
<p>
  If you need to have a right align link use the classes <code>action-toolbar-left</code> and
  <code>action-toolbar-right</code>. If you need more than a single link use a
  <a href="./buttons.html#dropdowns">dropdown</a>.
</p>
  <div class="pl-example">
    {{> components/examples/action-toolbar-right }}
  </div>

  <pre>
    <code class="html">
&lt;div class=&quot;action-area&quot;&gt;
  &lt;ol class=&quot;action-toolbar-left&quot; data-bind=&quot;widget: 'overflowMenu'&quot;&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-play'&gt;&lt;/svg&gt; start&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-stop'&gt;&lt;/svg&gt; stop&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot; disabled&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-stop'&gt;&lt;/svg&gt; disabled&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-refresh'&gt;&lt;/svg&gt; restart&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-archive'&gt;&lt;/svg&gt; archive&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-snapshot'&gt;&lt;/svg&gt; snapshot&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-disaster-recovery'&gt;&lt;/svg&gt; recovery&lt;/button&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;ol class=&quot;action-toolbar-right&quot;&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-settings'&gt;&lt;/svg&gt; settings&lt;/button&gt;&lt;/li&gt;
  &lt;/ol&gt;
&lt;/div&gt;
    </code>
  </pre>



  <h4>Confirmations</h4>
  <p>
    Some actions can be costly or even dangerous and therefore should be confirmed to make sure
    that the user actually wants to preform them. This shouldn’t be done on every action just
    ones that have possible negative side effects, like taking a service offline for a period
    of time.
  </p>
  <p>
    Cyclops provides a widget, the <code>actionToolbarConfirm</code>, that can be used to get
    confirmation from the user.  For more information about the specific options and
    configurations available please see the
    <a href="./widgets.html#actionToolbarConfirm">actionToolbarConfirm</a> code page.
  </p>
  <div class="pl-example">
    <div class="action-area">
      <ol class="action-toolbar-left" data-bind="widget: 'overflowMenu'">
        <li><a href="#" data-bind="widget: 'actionToolbarConfirm'"><svg class="cyclops-icon"><use xlink:href='#icon-play'></svg> start</a></li>
        <li><a href="#" data-bind="widget: {<commit_msg>add deep link<commit_after><section class="pl-section" id="actionToolbar">
  <h3><a href="#actionToolbar">Action Toolbar</a></h3>
  <p>
    Use <code>.action-toolbar</code> on an <code>&lt;ol&gt;</code> or <code>&lt;ul&gt;</code> to
    get a menu style toolbar. using the <code>overflowMenu</code> widget, as seen bellow, allowes
    for dynamic creation of a &quot;more&quot; dropdown link when the toolbar is too narrow.
  </p>

  <div class="pl-example">
    {{> components/examples/action-toolbar }}
  </div>
  <pre>
    <code class="html">
&lt;div class=&quot;action-area&quot;&gt;
  &lt;ol class=&quot;action-toolbar&quot; data-bind=&quot;widget: 'overflowMenu'&quot;&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-play'&gt;&lt;/svg&gt; start&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-stop'&gt;&lt;/svg&gt; stop&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot; disabled&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-stop'&gt;&lt;/svg&gt; disabled&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-refresh'&gt;&lt;/svg&gt; restart&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-archive'&gt;&lt;/svg&gt; archive&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-snapshot'&gt;&lt;/svg&gt; snapshot&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-disaster-recovery'&gt;&lt;/svg&gt; recovery&lt;/button&gt;&lt;/li&gt;
  &lt;/ol&gt;
&lt;/div&gt;
    </code>
  </pre>
<p>
  If you need to have a right align link use the classes <code>action-toolbar-left</code> and
  <code>action-toolbar-right</code>. If you need more than a single link use a
  <a href="./buttons.html#dropdowns">dropdown</a>.
</p>
  <div class="pl-example">
    {{> components/examples/action-toolbar-right }}
  </div>

  <pre>
    <code class="html">
&lt;div class=&quot;action-area&quot;&gt;
  &lt;ol class=&quot;action-toolbar-left&quot; data-bind=&quot;widget: 'overflowMenu'&quot;&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-play'&gt;&lt;/svg&gt; start&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-stop'&gt;&lt;/svg&gt; stop&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot; disabled&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-stop'&gt;&lt;/svg&gt; disabled&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-refresh'&gt;&lt;/svg&gt; restart&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-archive'&gt;&lt;/svg&gt; archive&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-snapshot'&gt;&lt;/svg&gt; snapshot&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-disaster-recovery'&gt;&lt;/svg&gt; recovery&lt;/button&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;ol class=&quot;action-toolbar-right&quot;&gt;
    &lt;li&gt;&lt;button type=&quot;button&quot;&gt;&lt;svg class=&quot;cyclops-icon&quot;&gt;&lt;use xlink:href='#icon-settings'&gt;&lt;/svg&gt; settings&lt;/button&gt;&lt;/li&gt;
  &lt;/ol&gt;
&lt;/div&gt;
    </code>
  </pre>



  <h4 id="actionToolbarConfirmations"><a href="#actionToolbarConfirmations">Action Toolbar Confirmations</a></h4>
  <p>
    Some actions can be costly or even dangerous and therefore should be confirmed to make sure
    that the user actually wants to preform them. This shouldn’t be done on every action just
    ones that have possible negative side effects, like taking a service offline for a period
    of time.
  </p>
  <p>
    Cyclops provides a widget, the <code>actionToolbarConfirm</code>, that can be used to get
    confirmation from the user.  For more information about the specific options and
    configurations available please see the
    <a href="./widgets.html#actionToolbarConfirm">actionToolbarConfirm</a> code page.
  </p>
  <div class="pl-example">
    <div class="action-area">
      <ol class="action-toolbar-left" data-bind="widget: 'overflowMenu'">
        <li><a href="#" data-bind="widget: 'actionToolbarConfirm'"><svg class="cyclops-icon"><use xlink:href='#icon-play'></svg> start</a></li>
        <li><a href="#" data-bind="widget: {
{'fraction_non_alphanumeric': 0.21772201916427936, 'fraction_numerical': 0.0007902795613948434, 'mean_word_length': 6.6006006006006, 'pattern_counts': {'":': 0, '<': 119, '<?xml version=': 0, '>': 121, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5556534', 'n_tokens_mistral': 3877, 'n_tokens_neox': 3794, 'n_words': 588}