A Perfect Memory project

Buttons & Inputs

Atoms

Buttons






  • See code 
    <button>Text</button>

<button class="primary small">Text</button>
<button class="blue small">Text</button>
<button class="danger small">Text</button>

<button class="primary small ghost">Text</button>
<button class="blue small ghost">Text</button>
<button class="danger small ghost">Text</button>


<button class="pill">Text</button>

<button class="primary small pill">Text</button>
<button class="blue small pill">Text</button>
<button class="danger small pill">Text</button>

<button class="primary small ghost pill">Text</button>
<button class="blue small ghost pill">Text</button>
<button class="danger small ghost pill">Text</button>






  • See code 
    <button>Text</button>

<button class="primary">Text</button>
<button class="blue">Text</button>
<button class="danger">Text</button>

<button class="primary ghost">Text</button>
<button class="blue ghost">Text</button>
<button class="danger ghost">Text</button>


<button class="pill">Text</button>

<button class="primary pill">Text</button>
<button class="blue pill">Text</button>
<button class="danger pill">Text</button>

<button class="primary ghost pill">Text</button>
<button class="blue ghost pill">Text</button>
<button class="danger ghost pill">Text</button>


Inputs




  • See code 
    <inpute type="text" class="small" placeholder="Input text">

<textarea rows="5" class="small" placeholder="Textarea"></textarea>


<inpute type="text" placeholder="Input text">

<textarea rows="5" placeholder="Textarea"></textarea>


Selects

  • See code 
    <select class="small">
  <option value="null" disabled selected>Choose option</option>
  <option value="1">Choose 1</option>
  <option value="2">Choose 2</option>
</select>


<select>
  <option value="null" disabled selected>Choose option</option>
  <option value="1">Choose 1</option>
  <option value="2">Choose 2</option>
</select>


Rate

  • See code 
    <div class="rate small">
  <span></span>
</div>

<div class="rate small">
  <span></span><span></span>
</div>

<div class="rate small">
  <span></span><span></span><span></span>
</div>

<div class="rate small">
  <span></span><span></span><span></span><span></span>
</div>


<div class="rate">
  <span></span>
</div>

<div class="rate">
  <span></span><span></span>
</div>

<div class="rate">
  <span></span><span></span><span></span>
</div>

<div class="rate">
  <span></span><span></span><span></span><span></span>
</div>