buttons.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <p>Default button styles</p>
  2. <p>
  3. <button bs-button>Button</button>
  4. <button bs-button="size-small">Button Small</button>
  5. <button bs-button="size-small" disabled>Button Small</button>
  6. </p>
  7. <p>Subtle button styles</p>
  8. <p>
  9. <button bs-button="subtle">Button</button>
  10. <button bs-button="size-small subtle">Button Small</button>
  11. <button bs-button="size-small subtle" disabled>Button Small</button>
  12. </p>
  13. <p>Alternative Subtle button styles</p>
  14. <p>
  15. <button bs-button="subtle-alt">Button</button>
  16. <button bs-button="size-small subtle-alt">Button Small</button>
  17. <button bs-button="size-small subtle-alt" disabled>Button Small</button>
  18. </p>
  19. <hr/>
  20. <p>Default buttons with icons</p>
  21. <div>
  22. <button bs-button="icon-left"><svg bs-svg-icon><use xlink:href="#svg-square-add"></use></svg> Icon Left</button>
  23. <button bs-button="icon-right"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg> Icon Right</button>
  24. <button bs-button="icon"><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
  25. <button bs-button="icon" disabled><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
  26. </div>
  27. <div>
  28. <button bs-button="size-small icon-left"><svg bs-svg-icon><use xlink:href="#svg-square-add"></use></svg> Icon Left</button>
  29. <button bs-button="size-small icon-right"><svg bs-svg-icon><use xlink:href="#svg-bug"></use></svg> Icon Right</button>
  30. <button bs-button="size-small icon"><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
  31. <button bs-button="size-small icon" disabled><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
  32. </div>
  33. <br/>
  34. <p>Subtle buttons with icons</p>
  35. <div>
  36. <button bs-button="subtle icon-left"><svg bs-svg-icon><use xlink:href="#svg-square-add"></use></svg> Icon Left</button>
  37. <button bs-button="subtle icon-right"><svg bs-svg-icon><use xlink:href="#svg-bug"></use></svg> Icon Right</button>
  38. <button bs-button="subtle icon"><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
  39. <button bs-button="subtle icon" disabled><svg bs-svg-icon><use xlink:href="#svg-help"></use></svg></button>
  40. </div>
  41. <div>
  42. <button bs-button="size-small subtle icon-left"><svg bs-svg-icon><use xlink:href="#svg-square-add"></use></svg> Icon Left</button>
  43. <button bs-button="size-small subtle icon-right"><svg bs-svg-icon><use xlink:href="#svg-bug"></use></svg> Icon Right</button>
  44. <button bs-button="size-small subtle icon"><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
  45. <button bs-button="size-small subtle icon" disabled><svg bs-svg-icon><use xlink:href="#svg-help"></use></svg></button>
  46. </div>
  47. <br/>
  48. <p>Alternative Subtle button styles with icons</p>
  49. <div>
  50. <button bs-button="size-small subtle-alt icon-left"><svg bs-svg-icon><use xlink:href="#svg-globe"></use></svg> Icon Left</button>
  51. <button bs-button="size-small subtle-alt icon-right"><svg bs-svg-icon><use xlink:href="#svg-bug"></use></svg> Icon Right</button>
  52. <button bs-button="size-small subtle-alt icon"><svg bs-svg-icon><use xlink:href="#svg-target"></use></svg></button>
  53. <button bs-button="size-small subtle-alt icon" disabled><svg bs-svg-icon><use xlink:href="#svg-help"></use></svg></button>
  54. </div>