Bootstrap Buttons

Github
bs-Button--primary
The bs-Button-primary class is applied.
        
<button class="bs-Button--primary">bs-Button--primary</button>
The bs-Button-primary class is rendered.
bs-Button--secondary
The bs-Button-secondary class is applied.
        
<button class="bs-Button--secondary">bs-Button--secondary</button>
The bs-Button-secondary class is rendered.
bs-Button--success
The bs-Button-success class is applied.
        
<button class="bs-Button--success">bs-Button--success</button>
The bs-Button-success class is rendered.
bs-Button--info
The bs-Button-info class is applied.
        
<button class="bs-Button--info">bs-Button--info</button>
The bs-Button-info class is rendered.
bs-Button--warning
The bs-Button-warning class is applied.
        
<button class="bs-Button--warning">bs-Button--warning</button>
The bs-Button-warning class is rendered.
bs-Button--danger
The bs-Button-danger class is applied.
        
<button class="bs-Button--danger">bs-Button--danger</button>
The bs-Button-danger class is rendered.
bs-Button--dark
The bs-Button-dark class is applied.
        
<button class="bs-Button--dark">bs-Button--dark</button>
The bs-Button-dark class is rendered.
bs-Button--light
The bs-Button-light class is applied.
        
<button class="bs-Button--light">bs-Button--light</button>
The bs-Button-light class is rendered.
bs-Button--link
The bs-Button-link class is applied.
        
<button class="bs-Button--link">bs-Button--link</button>
The bs-Button-link class is rendered.
bs-Button--primary-outline
The bs-Button-primary-outline class is applied.
        
<button class="bs-Button--primary-outline">bs-Button--primary-outline</button>
The bs-Button-primary-outline class is rendered.
bs-Button--secondary-outline
The bs-Button-secondary-outline class is applied.
        
<button class="bs-Button--secondary-outline">bs-Button--secondary-outline</button>
The bs-Button-secondary-outline class is rendered.
bs-Button--success-outline
The bs-Button-success-outline class is applied.
        
<button class="bs-Button--success-outline">bs-Button--success-outline</button>
The bs-Button-success-outline class is rendered.
bs-Button--info-outline
The bs-Button-info-outline class is applied.
        
<button class="bs-Button--info-outline">bs-Button--info-outline</button>
The bs-Button-info-outline class is rendered.
bs-Button--warning-outline
The bs-Button-warning-outline class is applied.
        
<button class="bs-Button--warning-outline">bs-Button--warning-outline</button>
The bs-Button-warning-outline class is rendered.
bs-Button--danger-outline
The bs-Button-danger-outline class is applied.
        
<button class="bs-Button--danger-outline">bs-Button--danger-outline</button>
The bs-Button-danger-outline class is rendered.
bs-Button--dark-outline
The bs-Button-dark-outline class is applied.
        
<button class="bs-Button--dark-outline">bs-Button--dark-outline</button>
The bs-Button-dark-outline class is rendered.
bs-Button--light-outline
The bs-Button--light-outline class is applied.
                    
  <div class="TestCanvas
              u-flex 
              u-flex-row
              u-background-color-md-deep-purple-900">
  <button class="bs-Button--light-outline">bs-Button--light-outline</button>
  </div>
The bs-Button--light-outline class is rendered.
bs-Button Tags
The bs-Buttons class is applied to button rendering elements like links or input elements.
                        
<a class="bs-Button--primary" href="#" role="button">Link</a>
<button class="bs-Button--primary" type="submit">Button</button>
<input class="bs-Button--primary" type="button" value="Input">
<input class="bs-Button--primary" type="submit" value="Submit">
<input class="bs-Button--primary" type="reset" value="Reset">

<br>
<br>

<a class="bs-Button--secondary" href="#" role="button">Link</a>
<button class="bs-Button--secondary" type="submit">Button</button>
<input class="bs-Button--secondary" type="button" value="Input">
<input class="bs-Button--secondary" type="submit" value="Submit">
<input class="bs-Button--secondary" type="reset" value="Reset">

<br>
<br>

<a class="bs-Button--success" href="#" role="button">Link</a>
<button class="bs-Button--success" type="submit">Button</button>
<input class="bs-Button--success" type="button" value="Input">
<input class="bs-Button--success" type="submit" value="Submit">
<input class="bs-Button--success" type="reset" value="Reset">

<br>
<br>

<a class="bs-Button--danger" href="#" role="button">Link</a>
<button class="bs-Button--danger" type="submit">Button</button>
<input class="bs-Button--danger" type="button" value="Input">
<input class="bs-Button--danger" type="submit" value="Submit">
<input class="bs-Button--danger" type="reset" value="Reset">

<br>
<br>

<a class="bs-Button--warning" href="#" role="button">Link</a>
<button class="bs-Button--warning" type="submit">Button</button>
<input class="bs-Button--warning" type="button" value="Input">
<input class="bs-Button--warning" type="submit" value="Submit">
<input class="bs-Button--warning" type="reset" value="Reset">

<br>
<br>

<a class="bs-Button--light" href="#" role="button">Link</a>
<button class="bs-Button--light" type="submit">Button</button>
<input class="bs-Button--light" type="button" value="Input">
<input class="bs-Button--light" type="submit" value="Submit">
<input class="bs-Button--light" type="reset" value="Reset">

<br>
<br>

<a class="bs-Button--dark" href="#" role="button">Link</a>
<button class="bs-Button--dark" type="submit">Button</button>
<input class="bs-Button--dark" type="button" value="Input">
<input class="bs-Button--dark" type="submit" value="Submit">
<input class="bs-Button--dark" type="reset" value="Reset">

<br>
<br>

<a class="bs-Button--link" href="#" role="button">Link</a>
<button class="bs-Button--link" type="submit">Button</button>
<input class="bs-Button--link" type="button" value="Input">
<input class="bs-Button--link" type="submit" value="Submit">
<input class="bs-Button--link" type="reset" value="Reset">
The elements are rendered as buttons.
Link

Link

Link

Link

Link

Link

Link

Link
u-button-lg
The u-button-block class is applied.
                    
<button class="bs-Button--primary u-button-lg">LARGE BUTTON</button>
The u-button-lg class is rendered.
u-button-sm
The u-button-large class is applied.
                  
<button class="bs-Button--primary u-button-sm">small button</button>
The u-button-lg class is rendered.
u-button-block
The u-button-block class is applied.
                  
<button class="bs-Button--primary u-button-block">block button</button>
The u-button-block class is rendered.
u-button-block
The u-button-block class is combined with the disabled attribute or the onDisabled class. 
                    
<button class="bs-Button--primary u-button-block" disabled="">block button</button>
<br>
<a class="bs-Button--primary u-button-block onDisabled">block button</a>
The button is disabled.

block button
u-button-group
The u-button-group class is applied.
                    
<div class="u-button-group">
<button class="bs-Button--secondary">left</button>
<button class="bs-Button--secondary">middle</button>
<button class="bs-Button--secondary">right</button>
</div>
The u-button-group class is rendered.