Atom

Button

  • inprogress

When to use

tbd

When to use

tbd

            
              <a class="button"><span class="button__label">button-label</span> <svg class="button__icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>

            
          
            
              <a class="button button--outline"><span class="button__label">button-label</span> <svg class="button__icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>

            
          
            
              <a class="button button--invert"><span class="button__label">button-label</span> <svg class="button__icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>

            
          
            
              <a class="button button--reverse"><span class="button__label">button-label</span> <svg class="button__icon" viewbox="0 0 32 32">
<use xlink:href="/assets/katana-components/svg/sprite.svg#arrow-right"></use></svg></a>

            
          
Name Description
button--invert Inverts the default button
button--reverse Reverses button lable and icon
button--link Generates a link button