Example: Button Sizing
Copy
                                    
                                        <button type="button" class="btn btn-xl btn-default">Text</button>
<button type="button" class="btn btn-lg btn-default">Text</button>
<button type="button" class="btn btn-default">Text</button>
<button type="button" class="btn btn-sm btn-default">Text</button>
<button type="button" class="btn btn-xs btn-default">Text</button>



Example: Button Widths




Copy
                                    
                                        <button type="button" class="btn btn-default w-auto">Text</button>
<button type="button" class="btn btn-default w-25">Text</button>
<button type="button" class="btn btn-default w-50">Text</button>
<button type="button" class="btn btn-default w-75">Text</button>
<button type="button" class="btn btn-default w-100">Text</button>



Example: Button Colors








Copy
                                    
                                        <button type="button" class="btn btn-primary">Text</button>
<button type="button" class="btn btn-secondary">Text</button>
<button type="button" class="btn btn-tertiary">Text</button>
<button type="button" class="btn btn-default">Text</button>
<button type="button" class="btn btn-info">Text</button>
<button type="button" class="btn btn-success">Text</button>
<button type="button" class="btn btn-warning">Text</button>
<button type="button" class="btn btn-danger">Text</button>
<button type="button" class="btn btn-black">Text</button>
Copy
                                    
                                        <!-- ACTIVE -->
<button type="button" class="btn btn-primary active">Text</button>
<!-- ACTIVE DISABLED -->
<button type="button" class="btn btn-primary active disabled">Text</button>
<!-- DISABLED -->
<button type="button" class="btn btn-primary disabled">Text</button>



Example: Button Outline








Copy
                                    
                                        <button type="button" class="btn btn-outline btn-primary">Text</button>
<button type="button" class="btn btn-outline btn-secondary">Text</button>
<button type="button" class="btn btn-outline btn-tertiary">Text</button>
<button type="button" class="btn btn-outline btn-default">Text</button>
<button type="button" class="btn btn-outline btn-info">Text</button>
<button type="button" class="btn btn-outline btn-success">Text</button>
<button type="button" class="btn btn-outline btn-warning">Text</button>
<button type="button" class="btn btn-outline btn-danger">Text</button>
<button type="button" class="btn btn-outline btn-black">Text</button>
Copy
                                    
                                        <!-- ACTIVE -->
<button type="button" class="btn btn-outline btn-primary active">Text</button>
<!-- ACTIVE DISABLED -->
<button type="button" class="btn btn-outline btn-primary active disabled">Text</button>
<!-- DISABLED -->
<button type="button" class="btn btn-outline btn-primary disabled">Text</button>



Example: Button Group
Copy
                                    
                                        <div class="btn-group" role="group" aria-label="Button Group">
<button type="button" class="btn btn-default">Text</button>
<button type="button" class="btn btn-default">Text</button>
<button type="button" class="btn btn-default">Text</button>
<button type="button" class="btn btn-default">Text</button>
</div>
Copy
                                    
                                        <!-- ACTIVE -->
<button type="button" class="btn btn-default active">Text</button>
<!-- ACTIVE DISABLED -->
<button type="button" class="btn btn-default active disabled">Text</button>
<!-- DISABLED -->
<button type="button" class="btn btn-default disabled">Text</button>



Example: Button Checkbox
Copy
                                    
                                    <a href="javascript:void(0);" target="_self" class="btn btn-checkbox" role="button">Text</a>
                                    
                                
Copy
                                    
                                        <!-- ACTIVE -->
<a href="javascript:void(0);" target="_self" class="btn btn-checkbox active" role="button">Text</a>
<!-- ACTIVE DISABLED -->
<a href="javascript:void(0);" target="_self" class="btn btn-checkbox active disabled" role="button">Text</a>
<!-- DISABLED -->
<a href="javascript:void(0);" target="_self" class="btn btn-checkbox disabled" role="button">Text</a>


Example: Button Filters
Filter Name Filter Name Filter Name
Copy
                                    
                                        <span class="btn-filters">
<a href="javascript:void(0);" target="_self" class="btn" role="button"><i class="fa-solid fa-times"></i>Text</a>
<a href="javascript:void(0);" target="_self" class="btn" role="button"><i class="fa-solid fa-times"></i>Text</a>
<a href="javascript:void(0);" target="_self" class="btn" role="button"><i class="fa-solid fa-times"></i>Text</a>
</span>



Example: Button Pill
btn btn-pill-active btn btn-pill-delete btn btn-pill-add
Copy
                                    
                                        <span class="btn-pills">
<a href="javascript:void(0);" target="_self" class="btn btn-pill-active" role="button">Text</a>
<a href="javascript:void(0);" target="_self" class="btn btn-pill-delete" role="button">Text</a>
<a href="javascript:void(0);" target="_self" class="btn btn-pill-add" role="button">Text</a>
</span>



Example: Button Radio
Copy
                                    
                                    <a href="javascript:void(0);" target="_self" class="btn btn-radio" role="button">Text</a>
                                    
                                
Copy
                                    
                                        <!-- ACTIVE -->
<a href="javascript:void(0);" target="_self" class="btn btn-radio active" role="button">Text</a>
<!-- ACTIVE DISABLED -->
<a href="javascript:void(0);" target="_self" class="btn btn-radio active disabled" role="button">Text</a>
<!-- DISABLED -->
<a href="javascript:void(0);" target="_self" class="btn btn-radio disabled" role="button">Text</a>


Example: Button with Icon and Text
Copy
                                    
                                    <a href="javascript:void(0);" target="_self" class="btn-icon-text" role="button"><i class="fa-regular fa-envelope"></i><span>Text</span></a>
Copy
                                    
                                    <!-- ACTIVE -->
<a href="javascript:void(0);" target="_self" class="btn-icon-text active" role="button"><i class="fa-regular fa-envelope"></i><span>Text</span></a>
<!-- ACTIVE DISABLED -->
<a href="javascript:void(0);" target="_self" class="btn-icon-text active disabled" role="button"><i class="fa-regular fa-envelope"></i><span>Text</span></a>
<!-- DISABLED -->
<a href="javascript:void(0);" target="_self" class="btn-icon-text disabled" role="button"><i class="fa-regular fa-envelope"></i><span>Text</span></a>



Example: Button with Icon, Text and Arrow
Copy
                                    
                                    <a href="javascript:void(0);" target="_self" class="btn-icon-text-arrow" role="button">
<i class="fa-regular fa-envelope"></i>
<span><h6>Text</h6><p>Text</p></span>
</a>
Copy
                                    
                                    <!-- ACTIVE -->
<a href="javascript:void(0);" target="_self" class="btn-icon-text-arrow active" role="button">...</a>
<!-- ACTIVE DISABLED -->
<a href="javascript:void(0);" target="_self" class="btn-icon-text-arrow active disabled" role="button">...</a>
<!-- DISABLED -->
<a href="javascript:void(0);" target="_self" class="btn-icon-text-arrow disabled" role="button">...</a>



Example: Button Page Link



Example: Button Selectors
Copy
                                    
                                    <div class="row">
<div class="col-12 col-sm-6">
<div class="btn-selectors">
<p><a href="javascript:void(0);" target="_self" class="btn btn-default" role="button">Text</a></p>
<p><a href="javascript:void(0);" target="_self" class="btn btn-default" role="button">Text</a></p>
<p><a href="javascript:void(0);" target="_self" class="btn btn-default" role="button">Text</a></p>
</div>
</div>
<div class="col-12 col-sm-6">
<div class="btn-selectors">
<p><a href="javascript:void(0);" target="_self" class="btn btn-default" role="button">Text</a></p>
<p><a href="javascript:void(0);" target="_self" class="btn btn-default" role="button">Text</a></p>
<p><a href="javascript:void(0);" target="_self" class="btn btn-default" role="button">Text</a></p>
</div>
</div>
</div>
Copy
                                    
                                    <!-- ACTIVE -->
<p><a href="javascript:void(0);" target="_self" class="btn btn-default active" role="button">Text</a></p>
<!-- ACTIVE DISABLED -->
<p><a href="javascript:void(0);" target="_self" class="btn btn-default active disabled" role="button">Text</a></p>
<!-- DISABLED -->
<p><a href="javascript:void(0);" target="_self" class="btn btn-default disabled" role="button">Text</a></p>



Example: Button Switch
Copy
                                    
                                        <div class="btn-switch">
<a href="javascript:void(0);" target="_self" class="btn" role="button">Yes</a>
<a href="javascript:void(0);" target="_self" class="btn" role="button">No</a>
</div>
Copy
                                    
                                        <!-- ACTIVE -->
<div class="btn-switch">
<a href="javascript:void(0);" target="_self" class="btn active" role="button">Yes</a>
<a href="javascript:void(0);" target="_self" class="btn" role="button">No</a>
</div>
<!-- ACTIVE DISABLED -->
<div class="btn-switch disabled">
<a href="javascript:void(0);" target="_self" class="btn active" role="button">Yes</a>
<a href="javascript:void(0);" target="_self" class="btn" role="button">No</a>
</div>
<!-- DISABLED -->
<div class="btn-switch disabled">
<a href="javascript:void(0);" target="_self" class="btn" role="button">Yes</a>
<a href="javascript:void(0);" target="_self" class="btn" role="button">No</a>
</div>


© Interactive Brokers LLC