Button

Buttons allow users to take actions and make choices with a single tap.

Default Buttons

Use the variant prop to change the button style.

<%= render Rvk::ButtonComponent.new(variant: :primary).with_content("Primary") %>
<%= render Rvk::ButtonComponent.new(variant: :secondary).with_content("Secondary") %>
<%= render Rvk::ButtonComponent.new(variant: :danger).with_content("Danger") %>
<%= render Rvk::ButtonComponent.new(variant: :success).with_content("Success") %>
<%= render Rvk::ButtonComponent.new(variant: :ghost).with_content("Ghost") %>

Outline Buttons

Add outline: true for border-only styling.

<%= render Rvk::ButtonComponent.new(variant: :primary, outline: true).with_content("Primary") %>

Sizes

Buttons come in 5 sizes: xs, sm, md (default), lg, and xl.

<%= render Rvk::ButtonComponent.new(size: :sm).with_content("Small") %>
<%= render Rvk::ButtonComponent.new(size: :lg).with_content("Large") %>

With Icons

Combine with IconComponent for icon buttons.

<%= render Rvk::ButtonComponent.new do %>
  <%= render Rvk::IconComponent.new(name: :plus, size: :sm) %>
  Add Item
<% end %>

Link Buttons

Pass href to render as an anchor tag instead of a button.

Go to Dashboard External Link

<%= render Rvk::ButtonComponent.new(href: "/dashboard").with_content("Go to Dashboard") %>

Disabled State

Disabled buttons are faded and non-interactive.

<%= render Rvk::ButtonComponent.new(disabled: true).with_content("Disabled") %>

Props

Prop	Type	Default	Description
variant	Symbol	:primary	Button style: :primary, :secondary, :danger, :success, :ghost
size	Symbol	:md	Button size: :xs, :sm, :md, :lg, :xl
outline	Boolean	false	Use outline style instead of solid
href	String	nil	If provided, renders as an <a> tag
disabled	Boolean	false	Disable the button
type	String	"button"	Button type attribute (button, submit, reset)