splitbutton.yml

name: Split button
status: Deprecated
deprecationNotice: Use a [button group](buttongroup.html) to show any additional actions related to the most critical action. Reference [Spectrum documentation](https://spectrum.corp.adobe.com/page/button-group/#Use-a-button-group-to-show-additional-actions) for more information.
examples:
  - id: splitbutton
    name: CTA
    description: A CTA split button.
    markup: |
      <div class="spectrum-SplitButton">
        <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-SplitButton-action"><span class="spectrum-Button-label">Split Button</span></button>
        <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-Button--iconOnly spectrum-SplitButton-trigger">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
      </div>

      <br>
      <br>

      <div class="spectrum-SplitButton spectrum-SplitButton--left">
        <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--iconOnly spectrum-Button--accent spectrum-SplitButton-trigger">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
        <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-SplitButton-action"><span class="spectrum-Button-label">Split Button</span></button>
      </div>
  - id: splitbutton
    name: Primary
    description: A primary split button.
    markup: |
      <div class="spectrum-SplitButton">
        <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-SplitButton-action"><span class="spectrum-Button-label">Split Button</span></button>
        <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-Button--iconOnly spectrum-SplitButton-trigger">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
      </div>

      <br>
      <br>

      <div class="spectrum-SplitButton spectrum-SplitButton--left">
        <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-Button--iconOnly spectrum-SplitButton-trigger">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
        <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-SplitButton-action"><span class="spectrum-Button-label">Split Button</span></button>
      </div>
  - id: splitbutton
    name: Secondary
    description: A secondary split button.
    markup: |
      <div class="spectrum-SplitButton">
        <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-SplitButton-action"><span class="spectrum-Button-label">Split Button</span></button>
        <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-Button--iconOnly spectrum-SplitButton-trigger">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
      </div>

      <br>
      <br>

      <div class="spectrum-SplitButton spectrum-SplitButton--left">
        <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-Button--iconOnly spectrum-SplitButton-trigger">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
        <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-SplitButton-action"><span class="spectrum-Button-label">Split Button</span></button>
      </div>