Versions Compared

Version Old Version 2 New Version 3
Changes made by

Femi

Femi

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Expand
titleExpand for table of Content
orderupdate
Table of Contents
outlinetrue
stylesquare

Description

Status
colourYellow
titleOngoing
 

Use split buttons to enable a scenario where a user can select from a number of fixed options or manually enter content.

Expand
titleExpand for more info
orderupdate

TBD

Related items:

    • Lorem ipsum dolor si

Behavior

If it is disabled, the cursor will indicate that the selection cannot be made.

Content guidelines 

TBD

Current appearances in our products


Expand
titleExpand to view products and screenshots
orderupdate





New LUX design 




TBD - Open issues

  1. xxxxx
  2. xxxxx
  3. xxxxx

Deceissiond Made

  1. xxxxx
  2. xxxxx
  3. xxxxx

Next Steps / Tasks

  1. xxxxx
  2. xxxxx
  3. xxxxx





html-macro
sanitizefalse
<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/prism.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism-coy.min.css">

<div class="card">
    			<div class="card-header">Split Button</div>
    			<div class="card-body">
        <form>
            				<form>
					<div class="form-group row">
                						<label for="inputKey" class="col-lg-32 col-form-label col-form-label-sm">Regular</label>
                						<div class="col-lg-94">
							<div                    class="btn-group">
								<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width">Split Button</button>
                    								<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-offset="-101" aria-haspopup="true" aria-expanded="false">
                        									<span class="sr-only">Toggle Dropdown</span>
								</button>
								<div class="dropdown-menu dropdown-menu-sm">
									<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item"   </button>
                    <div class="dropdown-menu">
                        href="#">Fourth Option</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="#">Fifth Option</a>
								</div>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group">
	<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width">Split Button</button>
	<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-offset="-101" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<div class="dropdown-menu dropdown-menu-sm">
		<a class="dropdown-item" href="#">First Option</a>
		<a class="dropdown-item" href="#">Second Option</a>
		<a class="dropdown-item" href="#">Third Option</a>
		<a class="dropdown-item" href="#">Fourth                      Option</a>
		<div class="dropdown-divider"></div>
                        		<a class="dropdown-item" href="#">Fourth>Fifth Option</a>
                    	</div>
                </div>
            </div>
            </div></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
                						<label for="inputKey" class="col-lg-3-2 col-form-label col-form-label-sm">Disabled</label>
                						<div class="col-lg-94">
							<div                    class="btn-group">
								<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" disabled>Split Button</button>
                    								<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-offset="-101" aria-haspopup="true" aria-expanded="false" disabled>
									<span class="sr-only">Toggle Dropdown</span>
								</button>
								<div class="dropdown-menu dropdown-menu-sm">
									<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth   <spanOption</a>
									<div class="srdropdown-onlydivider">Toggle Dropdown<></span>
                    </button>
                    <div class="dropdown-menu">
                        div>
									<a class="dropdown-item" href="#">Fifth Option</a>
								</div>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group">
	<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" disabled>Split Button</button>
	<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-offset="-101" aria-haspopup="true" aria-expanded="false" disabled>
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<div class="dropdown-menu dropdown-menu-sm">
		<a class="dropdown-item" href="#">First Option</a>
		<a class="dropdown-item" href="#">Second Option</a>
		<a class="dropdown-item" href="#">Third Option</a>
		<a class="dropdown-item" href="#">Fourth                      Option</a>
		<div class="dropdown-divider"></div>
                        		<a class="dropdown-item" href="#">Fourth>Fifth Option</a>
                    	</div>
                </div>
            </div>
            </div></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
                						<label for="inputKey" class="col-lg-3-2 col-form-label col-form-label-sm">Error</label>
                						<div class="col-lg-94">
							<div                    class="btn-group">
								<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width is-invalid">Split Button</button>
                    								<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split is-invalid" data-toggle="dropdown" data-offset="-101" aria-haspopup="true" aria-expanded="false">
									<span class="sr-only">Toggle Dropdown</span>
								</button>
								<div class="dropdown-menu dropdown-menu-sm">
									<a class="dropdown-item" href="#">First Option</a> <a class="dropdown-item" href="#">Second Option</a> <a class="dropdown-item" href="#">Third Option</a> <a class="dropdown-item" href="#">Fourth   <spanOption</a>
									<div class="srdropdown-onlydivider">Toggle Dropdown<></span>
                    </button>
                    <div class="dropdown-menu">
                        div>
									<a class="dropdown-item" href="#">Fifth Option</a>
								</div>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group">
	<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width is-invalid">Split Button</button>
	<button type="button" class="btn btn-outline-light btn-sm dropdown-toggle dropdown-toggle-split is-invalid" data-toggle="dropdown" data-offset="-101" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<div class="dropdown-menu dropdown-menu-sm">
		<a class="dropdown-item" href="#">First Option</a>
		<a class="dropdown-item" href="#">Second Option</a>
		<a class="dropdown-item" href="#">Third Option</a>
		<a class="dropdown-item" href="#">Fourth                      Option</a>
		<div class="dropdown-divider"></div>
                        		<a class="dropdown-item" href="#">Fourth>Fifth Option</a>
                    	</div>
                </div>
            </div>
        </form>
    </div>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>