Button group

Default .e-buttongroup

<div class="e-buttongroup">
  <button type="reset" class="e-btn">
    Default
  </button>
  <button type="submit" class="e-btn e-btn-secondary">
    Secondary
  </button>
  <button type="submit" class="e-btn e-btn-primary">
    Primary
  </button>
</div>

                        <div class="e-buttongroup">
                          <button type="reset" class="e-btn">Default</button>
                          <button type="submit" class="e-btn e-btn-secondary">Secondary</button>
                          <button type="submit" class="e-btn e-btn-primary">Primary</button>
                        </div>

Variations

Sticky .e-buttongroup-sticky

<div class="e-buttongroup e-buttongroup-sticky">
  <button type="reset" class="e-btn">
    Default
  </button>
  <button type="submit" class="e-btn e-btn-secondary">
    Secondary
  </button>
  <button type="submit" class="e-btn e-btn-primary">
    Primary
  </button>
</div>

                          <div class="e-buttongroup e-buttongroup-sticky">
                            <button type="reset" class="e-btn">Default</button>
                            <button type="submit" class="e-btn e-btn-secondary">Secondary</button>
                            <button type="submit" class="e-btn e-btn-primary">Primary</button>
                          </div>

Flexbox .e-buttongroup-flex

<div class="e-buttongroup e-buttongroup-flex">
  <button type="submit" class="e-btn e-btn-primary">
    Primary button
  </button>
  <button type="submit" class="e-btn e-btn-secondary">
    Secondary
  </button>
  <button type="submit" class="e-btn">
    Secondary
  </button>
  <button type="submit" class="e-btn">
    Secondary
  </button>
  <button type="submit" class="e-btn">
    Secondary
  </button>
  <button type="reset" class="e-btn">
    Default button
  </button>
</div>

                          <div class="e-buttongroup e-buttongroup-flex">
                            <button type="submit" class="e-btn e-btn-primary">Primary button</button>
                            <button type="submit" class="e-btn e-btn-secondary">Secondary</button>
                            <button type="submit" class="e-btn">Secondary</button>
                            <button type="submit" class="e-btn">Secondary</button>
                            <button type="submit" class="e-btn">Secondary</button>
                            <button type="reset" class="e-btn">Default button</button>
                          </div>

Related components

ButtonButton radioHeaderPagination

Last update

Message style(scss): more linting
Date:
()
Committer: Tamás Bíró
Component history