Atom

Button

.btn-primary .btn-secondary .btn-link

            
              <a href="button-link" class="btn btn-primary">Primary</a> <a href="button-link" class="btn btn-secondary">Secondary</a> <a href="button-link" class="btn btn-link">Link</a>

            
          

.btn-outline-primary .btn-outline-secondary .btn-outline-link

            
              <a href="button-link" class="btn btn-outline-primary">Primary</a> <a href="button-link" class="btn btn-outline-secondary">Secondary</a> <a href="button-link" class="btn btn-outline-link">Link</a> <a href="button-link" class="btn btn btn-outline-gray btn--icon-right"><span>Icon</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>

            
          
Show code
            
              <button type="submit" class="btn btn-primary disabled">Button disabled</button>

            
          
            
              <a href="button-link" class="btn btn-link btn--icon-right"><span>Icon</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#angle-right"></use></svg></a> <a href="button-link" class="btn btn-primary btn--icon-left"><span>Icon</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#angle-left"></use></svg></a> <a href="button-link" class="btn btn-primary btn--icon-right"><span>Icon</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a> <a href="button-link" class="btn btn-primary btn--icon"><svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#angle-up"></use></svg></a>

            
          

.btn-sm .btn-lg

            
              <a href="button-link" class="btn btn-primary btn-sm">Small</a> <a href="button-link" class="btn btn-primary">Base</a> <a href="button-link" class="btn btn-primary btn-lg">Large</a>

            
          

.btn--square

            
              <a href="button-link" class="btn btn-primary btn--square btn-sm">A</a> <a href="button-link" class="btn btn-primary btn--square">B</a> <a href="button-link" class="btn btn-primary btn--square btn-lg">C</a>

            
          

Alle möglichen HTML-Tags für Buttons

            
              <input type="button" value="Input" class="btn btn-primary"> <button type="submit" class="btn btn-primary">Button</button> <a href="button-link" class="btn btn-primary">A Href</a>

            
          

Der Modifier .btn-has-offset-js lässt den Ankerlink mit Offset scrollen.

            
              <a href="#anchor" class="btn btn-primary btn-has-offset-js">#anchor</a>

            
          
            
              <a href="button-link" class="btn btn btn-outline-white btn--icon-right"><span>Icon</span> <svg class="icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.symbol.svg#triangle"></use></svg></a>