button-bars.html 2.3 KB

123456789101112131415161718192021222324252627282930313233
  1. <div bs-button-group>
  2. <button bs-button="icon-left"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg> Website</button>
  3. <button bs-button="icon-left"><svg bs-svg-icon><use xlink:href="#svg-twitter"></use></svg> Twitter</button>
  4. <button bs-button="icon-right"><svg bs-svg-icon><use xlink:href="#svg-github"></use></svg> Github</button>
  5. <button bs-button="icon" disabled><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
  6. </div>
  7. <div bs-button-group>
  8. <button bs-button="icon"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg></button>
  9. <button bs-button="icon"><svg bs-svg-icon><use xlink:href="#svg-twitter"></use></svg></button>
  10. <button bs-button="icon"><svg bs-svg-icon><use xlink:href="#svg-github"></use></svg></button>
  11. <button bs-button="icon"><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
  12. </div>
  13. <div bs-button-group>
  14. <button bs-button="">Button</button>
  15. <button bs-button="icon"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg></button>
  16. <button bs-button="icon-left"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg> Button Small</button>
  17. <button bs-button disabled>n/a</button>
  18. <button bs-button="icon-right"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg> Button Small</button>
  19. </div>
  20. <div bs-button-group>
  21. <button bs-button="subtle-alt">Button</button>
  22. <button bs-button="subtle-alt icon"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg></button>
  23. <button bs-button="subtle-alt icon-left"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg> Button Small</button>
  24. <button bs-button="subtle-alt" disabled>n/a</button>
  25. <button bs-button="subtle-alt icon-right"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg> Button Small</button>
  26. </div>
  27. <div bs-button-group>
  28. <button bs-button="size-small subtle-alt">Button</button>
  29. <button bs-button="size-small subtle-alt icon"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg></button>
  30. <button bs-button="size-small subtle-alt icon-left"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg> Button Small</button>
  31. <button bs-button="size-small subtle-alt" disabled>n/a</button>
  32. <button bs-button="size-small subtle-alt icon-right"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg> Button Small</button>
  33. </div>