Buttons

  1. <div class="uk-margin-large" data-uk-margin>
  2.  
  3. <div class="uk-button-group">
  4. <button class="uk-button">Button</button>
  5. <div data-uk-dropdown="{mode:'click'}">
  6. <button class="uk-button"><i class="uk-icon-caret-down"></i></button>
  7. <div class="uk-dropdown uk-dropdown-width-2">
  8.  
  9. <div class="uk-grid">
  10.  
  11. <div class="uk-width-1-2">
  12. <ul class="uk-nav uk-nav-dropdown uk-panel">
  13. <li class="uk-nav-header">Header</li>
  14. <li><a href="#">Item</a></li>
  15. <li><a href="#">Item</a></li>
  16. <li class="uk-nav-divider"></li>
  17. <li><a href="#">Separated item</a></li>
  18. <li class="uk-parent">
  19. <a href="#">Parent</a>
  20. <ul class="uk-nav-sub">
  21. <li><a href="#">Sub item</a>
  22. <ul>
  23. <li><a href="#">Sub item</a></li>
  24. </ul>
  25. </li>
  26. </ul>
  27. </li>
  28. </ul>
  29. </div>
  30.  
  31. <div class="uk-width-1-2">
  32. <ul class="uk-nav uk-nav-dropdown uk-panel">
  33. <li class="uk-nav-header">Header</li>
  34. <li><a href="#">Item</a></li>
  35. <li><a href="#">Item</a></li>
  36. <li class="uk-nav-divider"></li>
  37. <li><a href="#">Separated item</a></li>
  38. <li class="uk-parent">
  39. <a href="#">Parent</a>
  40. <ul class="uk-nav-sub">
  41. <li><a href="#">Sub item</a>
  42. <ul>
  43. <li><a href="#">Sub item</a></li>
  44. </ul>
  45. </li>
  46. </ul>
  47. </li>
  48. </ul>
  49. </div>
  50.  
  51. </div>
  52.  
  53. </div>
  54. </div>
  55. </div>
  56.  
  57. <div class="uk-button-group">
  58. <button class="uk-button uk-button-primary">Primary</button>
  59. <div data-uk-dropdown="{mode:'click'}">
  60. <button class="uk-button uk-button-primary"><i class="uk-icon-caret-down"></i></button>
  61. <div class="uk-dropdown uk-dropdown-small">
  62. <ul class="uk-nav uk-nav-dropdown">
  63. <li class="uk-nav-header">Header</li>
  64. <li><a href="#">Item</a></li>
  65. <li><a href="#">Item</a></li>
  66. <li class="uk-nav-divider"></li>
  67. <li><a href="#">Separated item</a></li>
  68. <li class="uk-parent">
  69. <a href="#">Parent</a>
  70. <ul class="uk-nav-sub">
  71. <li><a href="#">Sub item</a>
  72. <ul>
  73. <li><a href="#">Sub item</a></li>
  74. </ul>
  75. </li>
  76. </ul>
  77. </li>
  78. </ul>
  79. </div>
  80. </div>
  81. </div>
  82.  
  83. <div class="uk-button-group">
  84. <button class="uk-button uk-button-success">Success</button>
  85. <div data-uk-dropdown="{mode:'click'}">
  86. <button class="uk-button uk-button-success"><i class="uk-icon-caret-down"></i></button>
  87. <div class="uk-dropdown">
  88. <ul class="uk-nav uk-nav-dropdown">
  89. <li class="uk-nav-header">Header</li>
  90. <li><a href="#">Item</a></li>
  91. <li><a href="#">Item</a></li>
  92. <li class="uk-nav-divider"></li>
  93. <li><a href="#">Separated item</a></li>
  94. <li class="uk-parent">
  95. <a href="#">Parent</a>
  96. <ul class="uk-nav-sub">
  97. <li><a href="#">Sub item</a>
  98. <ul>
  99. <li><a href="#">Sub item</a></li>
  100. </ul>
  101. </li>
  102. </ul>
  103. </li>
  104. </ul>
  105. </div>
  106. </div>
  107. </div>
  108.  
  109. <div class="uk-button-group">
  110. <button class="uk-button uk-button-danger">Danger</button>
  111. <div data-uk-dropdown="{mode:'click'}">
  112. <button class="uk-button uk-button-danger"><i class="uk-icon-caret-down"></i></button>
  113. <div class="uk-dropdown">
  114. <ul class="uk-nav uk-nav-dropdown">
  115. <li class="uk-nav-header">Header</li>
  116. <li><a href="#">Item</a></li>
  117. <li><a href="#">Item</a></li>
  118. <li class="uk-nav-divider"></li>
  119. <li><a href="#">Separated item</a></li>
  120. <li class="uk-parent">
  121. <a href="#">Parent</a>
  122. <ul class="uk-nav-sub">
  123. <li><a href="#">Sub item</a>
  124. <ul>
  125. <li><a href="#">Sub item</a></li>
  126. </ul>
  127. </li>
  128. </ul>
  129. </li>
  130. </ul>
  131. </div>
  132. </div>
  133. </div>
  134.  
  135. <button class="uk-button" disabled>Disabled</button>
  136. <button class="uk-button uk-button-link">Button link</button>
  137.  
  138. </div>