Contained Buttons

Using the .btn class without a modifier will create a contained button. The .btn class can be used on <button>, <a>, or <input> elements. Links should be assigned a role="button" attribute.

React
HTML

<>
  
  
  <Button
    className="btn m-8 btn-secondary"
    tag="button"
    type="button"
  >
    CONTAINED BUTTON
  </Button>
  
  
  <Button
    className="btn m-8 btn-sm btn-secondary"
    tag="button"
    type="button"
  >
    CONTAINED SMALL BUTTON
  </Button>
  
  
  <Button
    className="m-8 btn btn-primary btn-icon-only"
    tag="button"
    type="button"
  >
    <i className="icon prs-icon-envelop5" />
  </Button>
  
  
</>

 
<button type="button" class="btn m-8 btn-secondary btn btn-undefined">CONTAINED BUTTON</button>
<button type="button" class="btn m-8 btn-sm btn-secondary btn btn-undefined">CONTAINED SMALL BUTTON</button>
<button type="button" class="m-8 btn btn-primary btn-icon-only btn btn-undefined"><i class="icon prs-icon-envelop5"></i></button>

Outlined Buttons

For outlined buttons, add a .btn-outline-*** modifier followed by color.

React
HTML

<>
  
  
  <Button
    className="m-8 btn btn-outline-primary"
    tag="button"
    type="button"
  >
    OUTLINE BUTTON
  </Button>
  
  
  <Button
    className="m-8 btn btn-outline-primary"
    tag="button"
    type="button"
  >
    <i className="icon btn-icon__left prs-icon-search" />
    ICON BUTTON
  </Button>
  {'  '}
  <Button
    className="m-8 btn btn-outline-primary btn-icon-only"
    tag="button"
    type="button"
  >
    <i className="icon prs-icon-envelop5" />
    
    
  </Button>
  {' 
  '}
</>

 
<button type="button" class="m-8 btn btn-outline-primary btn btn-undefined">OUTLINE BUTTON</button>
<button type="button" class="m-8 btn btn-outline-primary btn btn-undefined"><i class="icon btn-icon__left prs-icon-search"></i>ICON BUTTON</button>  <button type="button" class="m-8 btn btn-outline-primary btn-icon-only btn btn-undefined"><i class="icon prs-icon-envelop5"></i>
</button>

<>
  
  
  <Button
    className="btn m-8 btn-textonly-primary"
    tag="button"
    type="button"
  >
    TEXT BUTTON
  </Button>
  
  
  <Button
    className="btn btn-textonly-primary btn-sm m-8 align-self-center"
    tag="button"
    type="button"
  >
    TEXT SMALL BUTTON
  </Button>
  
  
  <Button
    className="m-8 btn btn-textonly-primary btn-icon-only align-self-center"
    tag="button"
    type="button"
  >
    <i className="icon prs-icon-envelop5" />
  </Button>
  
  
</>

 
<button type="button" class="btn m-8 btn-textonly-primary btn btn-undefined">TEXT BUTTON</button>
<button type="button" class="btn btn-textonly-primary btn-sm m-8 align-self-center btn btn-undefined">TEXT SMALL BUTTON</button>
<button type="button" class="m-8 btn btn-textonly-primary btn-icon-only align-self-center btn btn-undefined"><i class="icon prs-icon-envelop5"></i></button>

Documentation

JavaScript

Pass these modifiers as props.

Option	Type
active	`bool`
block	`bool`
color	`string`
disabled	`bool`
size	`string`
children	`object`
className	`string`
cssModule	`object`
close	`bool`
onClick	`function`