On this page
Solid button variants with their default styling.
Primary
Secondary
Naked
Success
Warning
Danger
ERB
Ruby
HTML
<%= primary_button "Primary" %>
<%= secondary_button "Secondary" %>
<%= naked_button "Naked" %>
<%= success_button "Success" %>
<%= warning_button "Warning" %>
<%= danger_button "Danger" %> new_primary_button ( "Primary" )
new_secondary_button ( "Secondary" )
new_naked_button ( "Naked" )
new_success_button ( "Success" )
new_warning_button ( "Warning" )
new_danger_button ( "Danger" ) <button class= "btn btn-primary" > Primary</button>
<button class= "btn btn-secondary" > Secondary</button>
<button class= "btn btn-naked" > Naked</button>
<button class= "btn btn-success" > Success</button>
<button class= "btn btn-warning" > Warning</button>
<button class= "btn btn-danger" > Danger</button>
Outline button variants with transparent backgrounds and colored borders.
Outline Primary
Outline Success
Outline Warning
Outline Danger
ERB
Ruby
HTML
<%= outline_primary_button "Outline Primary" %>
<%= outline_success_button "Outline Success" %>
<%= outline_warning_button "Outline Warning" %>
<%= outline_danger_button "Outline Danger" %> new_outline_primary_button ( "Outline Primary" )
new_outline_success_button ( "Outline Success" )
new_outline_warning_button ( "Outline Warning" )
new_outline_danger_button ( "Outline Danger" ) <button class= "btn btn-outline-primary" > Outline Primary</button>
<button class= "btn btn-outline-success" > Outline Success</button>
<button class= "btn btn-outline-warning" > Outline Warning</button>
<button class= "btn btn-outline-danger" > Outline Danger</button>
Buttons that render as links when a path is provided.
ERB
Ruby
HTML
<%= primary_button "Primary Link" , path: "#" %>
<%= secondary_button "Secondary Link" , path: "#" %>
<%= naked_button "Naked Link" , path: "#" %>
<%= success_button "Success Link" , path: "#" %>
<%= warning_button "Warning Link" , path: "#" %>
<%= danger_button "Danger Link" , path: "#" %>
<%= outline_primary_button "Outline Primary Link" , path: "#" %>
<%= outline_success_button "Outline Success Link" , path: "#" %>
<%= outline_warning_button "Outline Warning Link" , path: "#" %>
<%= outline_danger_button "Outline Danger Link" , path: "#" %> new_primary_button ( "Primary Link" , path: "#" )
new_secondary_button ( "Secondary Link" , path: "#" )
new_naked_button ( "Naked Link" , path: "#" )
new_success_button ( "Success Link" , path: "#" )
new_warning_button ( "Warning Link" , path: "#" )
new_danger_button ( "Danger Link" , path: "#" )
new_outline_primary_button ( "Outline Primary Link" , path: "#" )
new_outline_success_button ( "Outline Success Link" , path: "#" )
new_outline_warning_button ( "Outline Warning Link" , path: "#" )
new_outline_danger_button ( "Outline Danger Link" , path: "#" ) <a class= "btn btn-primary" href= "#" > Primary Link</a>
<a class= "btn btn-secondary" href= "#" > Secondary Link</a>
<a class= "btn btn-naked" href= "#" > Naked Link</a>
<a class= "btn btn-success" href= "#" > Success Link</a>
<a class= "btn btn-warning" href= "#" > Warning Link</a>
<a class= "btn btn-danger" href= "#" > Danger Link</a>
<a class= "btn btn-outline-primary" href= "#" > Outline Primary Link</a>
<a class= "btn btn-outline-success" href= "#" > Outline Success Link</a>
<a class= "btn btn-outline-warning" href= "#" > Outline Warning Link</a>
<a class= "btn btn-outline-danger" href= "#" > Outline Danger Link</a>
Different button sizes using the size parameter.
Small
Medium (Default)
Large
ERB
Ruby
HTML
<%= primary_button "Small" , size: "sm" %>
<%= primary_button "Medium (Default)" %>
<%= primary_button "Large" , size: "lg" %> new_primary_button ( "Small" , size: "sm" )
new_primary_button ( "Medium (Default)" )
new_primary_button ( "Large" , size: "lg" ) <button class= "btn btn-primary btn-sm" > Small</button>
<button class= "btn btn-primary" > Medium (Default)</button>
<button class= "btn btn-primary btn-lg" > Large</button>
Disabled state for all button variants.
Primary Disabled
Secondary Disabled
Naked Disabled
Success Disabled
Warning Disabled
Danger Disabled
Outline Primary Disabled
Outline Success Disabled
Outline Warning Disabled
Outline Danger Disabled
ERB
Ruby
HTML
<%= primary_button "Primary Disabled" , disabled: true %>
<%= secondary_button "Secondary Disabled" , disabled: true %>
<%= naked_button "Naked Disabled" , disabled: true %>
<%= success_button "Success Disabled" , disabled: true %>
<%= warning_button "Warning Disabled" , disabled: true %>
<%= danger_button "Danger Disabled" , disabled: true %>
<%= outline_primary_button "Outline Primary Disabled" , disabled: true %>
<%= outline_success_button "Outline Success Disabled" , disabled: true %>
<%= outline_warning_button "Outline Warning Disabled" , disabled: true %>
<%= outline_danger_button "Outline Danger Disabled" , disabled: true %> new_primary_button ( "Primary Disabled" , disabled: true )
new_secondary_button ( "Secondary Disabled" , disabled: true )
new_naked_button ( "Naked Disabled" , disabled: true )
new_success_button ( "Success Disabled" , disabled: true )
new_warning_button ( "Warning Disabled" , disabled: true )
new_danger_button ( "Danger Disabled" , disabled: true )
new_outline_primary_button ( "Outline Primary Disabled" , disabled: true )
new_outline_success_button ( "Outline Success Disabled" , disabled: true )
new_outline_warning_button ( "Outline Warning Disabled" , disabled: true )
new_outline_danger_button ( "Outline Danger Disabled" , disabled: true ) <button class= "btn btn-primary" disabled= "disabled" > Primary Disabled</button>
<button class= "btn btn-secondary" disabled= "disabled" > Secondary Disabled</button>
<button class= "btn btn-naked" disabled= "disabled" > Naked Disabled</button>
<button class= "btn btn-success" disabled= "disabled" > Success Disabled</button>
<button class= "btn btn-warning" disabled= "disabled" > Warning Disabled</button>
<button class= "btn btn-danger" disabled= "disabled" > Danger Disabled</button>
<button class= "btn btn-outline-primary" disabled= "disabled" > Outline Primary Disabled</button>
<button class= "btn btn-outline-success" disabled= "disabled" > Outline Success Disabled</button>
<button class= "btn btn-outline-warning" disabled= "disabled" > Outline Warning Disabled</button>
<button class= "btn btn-outline-danger" disabled= "disabled" > Outline Danger Disabled</button>
Perfect for icon-only actions like toggles and close buttons.
ERB
Ruby
HTML
<%= primary_button icon ( "menu" , size: 20 ), class: "btn-circular" %>
<%= secondary_button icon ( "x" , size: 20 ), class: "btn-circular" %>
<%= naked_button icon ( "settings" , size: 20 ), class: "btn-circular" %>
<%= success_button icon ( "check" , size: 20 ), class: "btn-circular" %>
<%= warning_button icon ( "triangle-alert" , size: 20 ), class: "btn-circular" %>
<%= danger_button icon ( "trash" , size: 20 ), class: "btn-circular" %>
<%= outline_primary_button icon ( "search" , size: 20 ), class: "btn-circular" %>
<%= outline_success_button icon ( "circle-check" , size: 20 ), class: "btn-circular" %>
<%= outline_danger_button icon ( "loader" , size: 20 , spin: true ), class: "btn-circular" %>
<%= outline_warning_button icon ( "info" , size: 40 ), class: "btn-circular" %> new_primary_button ( icon ( "menu" , size: 20 ), class: "btn-circular" )
new_secondary_button ( icon ( "x" , size: 20 ), class: "btn-circular" )
new_naked_button ( icon ( "settings" , size: 20 ), class: "btn-circular" )
new_success_button ( icon ( "check" , size: 20 ), class: "btn-circular" )
new_warning_button ( icon ( "triangle-alert" , size: 20 ), class: "btn-circular" )
new_danger_button ( icon ( "trash" , size: 20 ), class: "btn-circular" )
new_outline_primary_button ( icon ( "search" , size: 20 ), class: "btn-circular" )
new_outline_success_button ( icon ( "circle-check" , size: 20 ), class: "btn-circular" )
new_outline_danger_button ( icon ( "loader" , size: 20 , spin: true ), class: "btn-circular" )
new_outline_warning_button ( icon ( "info" , size: 40 ), class: "btn-circular" ) <button class= "btn btn-primary btn-circular" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "20" height= "20" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "M4 5h16" ></path><path d= "M4 12h16" ></path><path d= "M4 19h16" ></path></svg>
</button>
<button class= "btn btn-secondary btn-circular" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "20" height= "20" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "M18 6 6 18" ></path><path d= "m6 6 12 12" ></path></svg>
</button>
<button class= "btn btn-naked btn-circular" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "20" height= "20" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" ></path><circle cx= "12" cy= "12" r= "3" ></circle></svg>
</button>
<button class= "btn btn-success btn-circular" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "20" height= "20" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "M20 6 9 17l-5-5" ></path></svg>
</button>
<button class= "btn btn-warning btn-circular" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "20" height= "20" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" ></path><path d= "M12 9v4" ></path><path d= "M12 17h.01" ></path></svg>
</button>
<button class= "btn btn-danger btn-circular" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "20" height= "20" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></path><path d= "M3 6h18" ></path><path d= "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" ></path></svg>
</button>
<button class= "btn btn-outline-primary btn-circular" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "20" height= "20" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "m21 21-4.34-4.34" ></path><circle cx= "11" cy= "11" r= "8" ></circle></svg>
</button>
<button class= "btn btn-outline-success btn-circular" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "20" height= "20" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><circle cx= "12" cy= "12" r= "10" ></circle><path d= "m9 12 2 2 4-4" ></path></svg>
</button>
<button class= "btn btn-outline-danger btn-circular" >
<svg class= "spin" xmlns= "http://www.w3.org/2000/svg" width= "20" height= "20" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "M12 2v4" ></path><path d= "m16.2 7.8 2.9-2.9" ></path><path d= "M18 12h4" ></path><path d= "m16.2 16.2 2.9 2.9" ></path><path d= "M12 18v4" ></path><path d= "m4.9 19.1 2.9-2.9" ></path><path d= "M2 12h4" ></path><path d= "m4.9 4.9 2.9 2.9" ></path></svg>
</button>
<button class= "btn btn-outline-warning btn-circular" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "40" height= "40" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><circle cx= "12" cy= "12" r= "10" ></circle><path d= "M12 16v-4" ></path><path d= "M12 8h.01" ></path></svg>
</button>
Buttons with icons and text content using block syntax.
Search
Settings
Info
Save
Warning
Delete
Profile
Confirm
Alert
Loading
ERB
Ruby
HTML
<%= primary_button icon ( "search" ) + "Search" %>
<%= secondary_button icon ( "settings" ) + "Settings" %>
<%= naked_button icon ( "info" ) + "Info" %>
<%= success_button icon ( "check" ) + "Save" %>
<%= warning_button icon ( "triangle-alert" ) + "Warning" %>
<%= danger_button icon ( "trash" ) + "Delete" %>
<%= outline_primary_button icon ( "user" ) + "Profile" %>
<%= outline_success_button icon ( "circle-check" ) + "Confirm" %>
<%= outline_warning_button icon ( "info" ) + "Alert" %>
<%= outline_danger_button icon ( "loader" , spin: true ) + "Loading" %> new_primary_button ( icon ( "search" ) + "Search" )
new_secondary_button ( icon ( "settings" ) + "Settings" )
new_naked_button ( icon ( "info" ) + "Info" )
new_success_button ( icon ( "check" ) + "Save" )
new_warning_button ( icon ( "triangle-alert" ) + "Warning" )
new_danger_button ( icon ( "trash" ) + "Delete" )
new_outline_primary_button ( icon ( "user" ) + "Profile" )
new_outline_success_button ( icon ( "circle-check" ) + "Confirm" )
new_outline_warning_button ( icon ( "info" ) + "Alert" )
new_outline_danger_button ( icon ( "loader" , spin: true ) + "Loading" ) <button class= "btn btn-primary" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "16" height= "16" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "m21 21-4.34-4.34" ></path><circle cx= "11" cy= "11" r= "8" ></circle></svg>
Search
</button>
<button class= "btn btn-secondary" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "16" height= "16" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" ></path><circle cx= "12" cy= "12" r= "3" ></circle></svg>
Settings
</button>
<button class= "btn btn-naked" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "16" height= "16" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><circle cx= "12" cy= "12" r= "10" ></circle><path d= "M12 16v-4" ></path><path d= "M12 8h.01" ></path></svg>
Info
</button>
<button class= "btn btn-success" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "16" height= "16" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "M20 6 9 17l-5-5" ></path></svg>
Save
</button>
<button class= "btn btn-warning" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "16" height= "16" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" ></path><path d= "M12 9v4" ></path><path d= "M12 17h.01" ></path></svg>
Warning
</button>
<button class= "btn btn-danger" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "16" height= "16" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" ></path><path d= "M3 6h18" ></path><path d= "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" ></path></svg>
Delete
</button>
<button class= "btn btn-outline-primary" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "16" height= "16" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" ></path><circle cx= "12" cy= "7" r= "4" ></circle></svg>
Profile
</button>
<button class= "btn btn-outline-success" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "16" height= "16" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><circle cx= "12" cy= "12" r= "10" ></circle><path d= "m9 12 2 2 4-4" ></path></svg>
Confirm
</button>
<button class= "btn btn-outline-warning" >
<svg xmlns= "http://www.w3.org/2000/svg" width= "16" height= "16" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><circle cx= "12" cy= "12" r= "10" ></circle><path d= "M12 16v-4" ></path><path d= "M12 8h.01" ></path></svg>
Alert
</button>
<button class= "btn btn-outline-danger" >
<svg class= "spin" xmlns= "http://www.w3.org/2000/svg" width= "16" height= "16" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><path d= "M12 2v4" ></path><path d= "m16.2 7.8 2.9-2.9" ></path><path d= "M18 12h4" ></path><path d= "m16.2 16.2 2.9 2.9" ></path><path d= "M12 18v4" ></path><path d= "m4.9 19.1 2.9-2.9" ></path><path d= "M2 12h4" ></path><path d= "m4.9 4.9 2.9 2.9" ></path></svg>
Loading
</button>
Buttons with arbitrary content using block syntax.
This is some HTML content
in the button body.
ERB
Ruby
HTML
<%= outline_warning_button do %>
<p> This is some <strong> HTML</strong> content <%= icon ( "info" , class: "inline" ) %> in the <code> button</code> body.</p>
<% end %> new_outline_warning_button (
%(<p>This is some <strong>HTML</strong> content #{ icon ( "info" , class: "inline" ) } in the <code>button</code> body.</p>) . html_safe
) <button class= "btn btn-outline-warning" >
<p>
This is some
<strong> HTML</strong>
content
<svg class= "inline" xmlns= "http://www.w3.org/2000/svg" width= "16" height= "16" viewbox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" stroke-linecap= "round" stroke-linejoin= "round" ><circle cx= "12" cy= "12" r= "10" ></circle><path d= "M12 16v-4" ></path><path d= "M12 8h.01" ></path></svg>
in the
<code> button</code>
body.
</p>
</button>
