Button Example

Ready

HTML
View
Context
Info
Notes


        
        <h3>
    Outlined
</h3>
<div class='card'>
    <div class='card-body'>
        <button type='button' class='btn rounded-pill btn-sm btn-outline-primary mb-3'>
            primary
        </button>
        <button type='button' class='btn rounded-0 btn-lg btn-outline-secondary mb-3'>
            secondary
        </button>
        <button type='button' class='btn rounded d-block w-25 btn-outline-success mb-3'>
            success
        </button>
        <button type='button' class='btn rounded-pill btn-outline-danger mb-3'>
            danger
        </button>
        <button type='button' class='btn rounded-0 btn-sm btn-outline-warning mb-3'>
            warning
        </button>
        <button type='button' class='btn rounded btn-outline-info mb-3'>
            info
        </button>
        <button type='button' class='btn rounded-pill btn-lg btn-outline-light mb-3'>
            light
        </button>
        <button type='button' class='btn rounded-0 btn-outline-dark mb-3'>
            dark
        </button>
    </div>
</div>

Light action button:

<button class="btn btn-sm btn-light btn-active-light-primary">
    <i class="fas fa-edit"></i>
    Edit Me

</button>

<h3 class='mt-5'>
    Normal
</h3>
<div class='card' style='background-color: rgba(66, 102, 131, 0.158);'>
    <div class='card-body'>
        <button type='button' class='btn rounded-pill btn-sm btn-primary mb-3'>
            primary
        </button>
        <button type='button' class='btn rounded-0 btn-lg btn-secondary mb-3'>
            secondary
        </button>
        <button type='button' class='btn rounded d-block w-25 btn-success mb-3'>
            success
        </button>
        <button type='button' class='btn rounded-pill btn-danger mb-3'>
            danger
        </button>
        <button type='button' class='btn rounded-0 btn-sm btn-warning mb-3'>
            warning
        </button>
        <button type='button' class='btn rounded btn-info mb-3'>
            info
        </button>
        <button type='button' class='btn rounded-pill btn-lg btn-light mb-3'>
            light
        </button>
        <button type='button' class='btn rounded-0 btn-dark mb-3'>
            dark
        </button>
        <button type='button' class='btn rounded btn-gradient mb-3'>
            gradient
        </button>
    </div>
</div>

<h3 class='mt-5'>
    Translucent
</h3>
<div class='card'>
    <div class='card-body'>
        <button type='button' class='btn rounded-pill btn-sm btn-translucent-primary mb-3'>
            primary
        </button>
        <button type='button' class='btn rounded-0 btn-lg btn-translucent-secondary mb-3'>
            secondary
        </button>
        <button type='button' class='btn rounded d-block w-25 btn-translucent-success mb-3'>
            success
        </button>
        <button type='button' class='btn rounded-pill btn-translucent-danger mb-3'>
            danger
        </button>
        <button type='button' class='btn rounded-0 btn-sm btn-translucent-warning mb-3'>
            warning
        </button>
        <button type='button' class='btn rounded btn-translucent-info mb-3'>
            info
        </button>
        <button type='button' class='btn rounded-pill btn-lg btn-translucent-light mb-3'>
            light
        </button>
        <button type='button' class='btn rounded-0 btn-translucent-dark mb-3'>
            dark
        </button>
    </div>
</div>

<h3 class='mt-5'>
    Icons
</h3>
<div class='card'>
    <div class='card-body'>
        <button type='button' class='btn rounded-pill btn-translucent-primary mb-3'>
            <i class='fas fa-user me-2'></i>
        </button>
        <button type='button' class='btn rounded-0 btn-translucent-secondary mb-3'>
            <i class='fas fa-edit me-2'></i>
        </button>
        <button type='button' class='btn rounded btn-translucent-warning mb-3'>
            <i class='fas fa-trash me-2'></i>
        </button>
        <button type='button' class='btn rounded-pill btn-translucent-info mb-3'>
            <i class='fas fa-check me-2'></i>
        </button>
        <button type='button' class='btn rounded-0 btn-translucent-danger mb-3'>
            <i class='fas fa-star me-2'></i>
        </button>
        <button type='button' class='btn rounded btn-translucent-primary mb-3'>
            <i class='fas fa-bookmark me-2'></i>
        </button>
    </div>
</div>

<h3 class='mt-5'>
    market
</h3>
<div class='card' style='background-color: rgba(66, 102, 131, 0.158);'>
    <div class='card-body'>
        <a href='#' class='btn-market btn-apple' role='button'>
            <span class='btn-market-subtitle'>
                Download on the
            </span>
            <span class='btn-market-title'>
                apple
            </span>
        </a>
        <a href='#' class='btn-market btn-google' role='button'>
            <span class='btn-market-subtitle'>
                Download on the
            </span>
            <span class='btn-market-title'>
                google
            </span>
        </a>
        <a href='#' class='btn-market btn-windows' role='button'>
            <span class='btn-market-subtitle'>
                Download on the
            </span>
            <span class='btn-market-title'>
                windows
            </span>
        </a>
        <a href='#' class='btn-market btn-amazon' role='button'>
            <span class='btn-market-subtitle'>
                Download on the
            </span>
            <span class='btn-market-title'>
                amazon
            </span>
        </a>
    </div>
</div>

<h3 class='mt-5'>
    market (dark theme)
</h3>
<div class='card' style='background-color: rgba(66, 102, 131, 0.158);'>
    <div class='card-body'>
        <div class='badge bg-dark p-3'>
            <a href='#' class='btn-market btn-outline btn-apple' role='button'>
                <span class='btn-market-subtitle'>
                    Download on the
                </span>
                <span class='btn-market-title'>
                    apple
                </span>
            </a>
            <a href='#' class='btn-market btn-outline btn-google' role='button'>
                <span class='btn-market-subtitle'>
                    Download on the
                </span>
                <span class='btn-market-title'>
                    google
                </span>
            </a>
            <a href='#' class='btn-market btn-outline btn-windows' role='button'>
                <span class='btn-market-subtitle'>
                    Download on the
                </span>
                <span class='btn-market-title'>
                    windows
                </span>
            </a>
            <a href='#' class='btn-market btn-outline btn-amazon' role='button'>
                <span class='btn-market-subtitle'>
                    Download on the
                </span>
                <span class='btn-market-title'>
                    amazon
                </span>
            </a>
        </div>
    </div>
</div>

<h3 class='mt-5'>
    states
</h3>
<div class='card' style='background-color: rgba(66, 102, 131, 0.158);'>
    <div class='card-body'>
        <button type='button' class='btn btn-primary active'>
            Active
        </button>
        <button type='button' class='btn btn-secondary' disabled>
            Disabled
        </button>
        <button type='button' class='btn btn-primary'>
            <span class='spinner-border spinner-border-sm me-2' role='status' aria-hidden='true'></span>
            Loading...
        </button>
        <button type='button' class='btn btn-secondary'>
            <span class='spinner-grow spinner-grow-sm me-2' role='status' aria-hidden='true'></span>
            Loading...
        </button>
    </div>
</div>


        <h3>
  Outlined
</h3>
<div class='card'>
  <div class='card-body'>
    {{#each listItems}}
      {{#xif name '!==' 'gradient'}}
        <button type='button' class='btn {{class}} btn-outline-{{name}} mb-3'>
          {{name}}
        </button>
      {{/xif}}
    {{/each}}
  </div>
</div>

Light action button:

<button class="btn btn-sm btn-light btn-active-light-primary">
  <i class="fas fa-edit"></i>
  Edit Me

</button>

<h3 class='mt-5'>
  Normal
</h3>
<div class='card' style='background-color: rgba(66, 102, 131, 0.158);'>
  <div class='card-body'>
    {{#each listItems}}
      <button type='button' class='btn {{class}} btn-{{name}} mb-3'>
        {{name}}
      </button>
    {{/each}}
  </div>
</div>

<h3 class='mt-5'>
  Translucent
</h3>
<div class='card'>
  <div class='card-body'>
    {{#each listItems}}
      {{#xif name '!==' 'gradient'}}
        <button
          type='button'
          class='btn {{class}} btn-translucent-{{name}} mb-3'
        >
          {{name}}
        </button>
      {{/xif}}
    {{/each}}
  </div>
</div>

<h3 class='mt-5'>
  Icons
</h3>
<div class='card'>
  <div class='card-body'>
    {{#each listIcons as |icon|}}
      <button type='button' class='btn {{class}} mb-3'>
        <i class='fas fa-{{icon.name}} me-2'></i>
      </button>
    {{/each}}
  </div>
</div>

<h3 class='mt-5'>
  market
</h3>
<div class='card' style='background-color: rgba(66, 102, 131, 0.158);'>
  <div class='card-body'>
    {{#each listMarket}}
      <a href='#' class='btn-market btn-{{name}}' role='button'>
        <span class='btn-market-subtitle'>
          Download on the
        </span>
        <span class='btn-market-title'>
          {{name}}
        </span>
      </a>
    {{/each}}
  </div>
</div>

<h3 class='mt-5'>
  market (dark theme)
</h3>
<div class='card' style='background-color: rgba(66, 102, 131, 0.158);'>
  <div class='card-body'>
    <div class='badge bg-dark p-3'>
      {{#each listMarket}}
        <a href='#' class='btn-market btn-outline btn-{{name}}' role='button'>
          <span class='btn-market-subtitle'>
            Download on the
          </span>
          <span class='btn-market-title'>
            {{name}}
          </span>
        </a>
      {{/each}}
    </div>
  </div>
</div>

<h3 class='mt-5'>
  states
</h3>
<div class='card' style='background-color: rgba(66, 102, 131, 0.158);'>
  <div class='card-body'>
    <button type='button' class='btn btn-primary active'>
      Active
    </button>
    <button type='button' class='btn btn-secondary' disabled>
      Disabled
    </button>
    <button type='button' class='btn btn-primary'>
      <span
        class='spinner-border spinner-border-sm me-2'
        role='status'
        aria-hidden='true'
      ></span>
      Loading...
    </button>
    <button type='button' class='btn btn-secondary'>
      <span
        class='spinner-grow spinner-grow-sm me-2'
        role='status'
        aria-hidden='true'
      ></span>
      Loading...
    </button>
  </div>
</div>


        
            
            {
  "listItems": [
    {
      "id": 1,
      "name": "primary",
      "class": "rounded-pill btn-sm"
    },
    {
      "id": 2,
      "name": "secondary",
      "class": "rounded-0 btn-lg"
    },
    {
      "id": 3,
      "name": "success",
      "class": "rounded d-block w-25"
    },
    {
      "id": 4,
      "name": "danger",
      "class": "rounded-pill"
    },
    {
      "id": 5,
      "name": "warning",
      "class": "rounded-0 btn-sm"
    },
    {
      "id": 6,
      "name": "info",
      "class": "rounded"
    },
    {
      "id": 7,
      "name": "light",
      "class": "rounded-pill btn-lg"
    },
    {
      "id": 8,
      "name": "dark",
      "class": "rounded-0"
    },
    {
      "id": 9,
      "name": "gradient",
      "class": "rounded"
    }
  ],
  "listIcons": [
    {
      "id": 1,
      "name": "user",
      "class": "rounded-pill btn-translucent-primary"
    },
    {
      "id": 2,
      "name": "edit",
      "class": "rounded-0 btn-translucent-secondary"
    },
    {
      "id": 3,
      "name": "trash",
      "class": "rounded btn-translucent-warning"
    },
    {
      "id": 4,
      "name": "check",
      "class": "rounded-pill btn-translucent-info"
    },
    {
      "id": 5,
      "name": "star",
      "class": "rounded-0 btn-translucent-danger"
    },
    {
      "id": 6,
      "name": "bookmark",
      "class": "rounded btn-translucent-primary"
    }
  ],
  "listMarket": [
    {
      "id": 1,
      "name": "apple"
    },
    {
      "id": 2,
      "name": "google"
    },
    {
      "id": 3,
      "name": "windows"
    },
    {
      "id": 4,
      "name": "amazon"
    }
  ]
}

Handle: @button
Preview:
- With layout
- Component only
Filesystem Path: src/components/button/button.hbs

No notes defined.