Atom

Button

  • inprogress
Usage Default Outline Invert Reverse Link Modifier

Usage

When to use

tbd

When to use

tbd

Default

Show code
button-label 
            
              <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>

Outline

Show code
button-label 
            
              <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>

Invert

Show code
button-label 
            
              <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>

Reverse

Show code
button-label 
            
              <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>

Modifier

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