Button Edit
Displays a button or a component that looks like a button.
Examples
<%= render_button "Button" %>
<%= render_button variant: :secondary do %>
<svg class="h-4 w-4 mr-2 text-primary" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"></path>
</svg> Secondary with Icon
<% end %>
<%= render_button text: "Destructive", variant: :destructive %>
<%= render_button text: "Outline", variant: :outline %>
<%= render_button text: "Ghost", variant: :ghost %>
<%= render_button "Link", as: :link, href: "/" %>
<%= render_button text: "Ghost Link", variant: :ghost, as: :link %>
Installation
rails generate shadcn-ui button
Usage
<%= render_button(label, text: nil,
variant: :default,
as: :button,
href: nil,
data: {},
**options, &block) %>
The Button component introduces:
app/helpers/components/button_helper.rbapp/views/components/ui/_button.html.erb
The method render_button defined in app/helpers/components/button_helper.rb
accepts a first argument for the text of the button or as a text: keyword argument.
Optional arguments for the button include:
variant:, including:secondary,:destructive,:outline, and:ghostas:which allows the button to be rendered as a<a>tag.- A
blockcan be passed to render the text including other elements such as icons.