Blocks

Button

Triggers an action or event — wraps a plain HTML button with Tailwind variants and sizes.

Usage

Pass a label as the first argument or use a block. All extra kwargs are forwarded to the underlying button tag.

sui.button "Save changes"

sui.button do
  "Custom label"
end

Variants

Use variant: to control the visual style.

sui.button "Default", variant: :default

sui.button "Destructive", variant: :destructive

sui.button "Outline", variant: :outline

sui.button "Secondary", variant: :secondary

sui.button "Ghost", variant: :ghost

sui.button "Link", variant: :link

Sizes

Use size: to adjust the button height and padding.

sui.button "Small", size: :sm

sui.button "Default", size: :default

sui.button "Large", size: :lg

sui.button size: :icon do
  raw('<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>')
end

Rails helpers

sui.button_to generates a mini-form (CSRF + Turbo-safe). sui.link_to renders an anchor styled as a button.

sui.button_to "Post action", "#", method: :post, variant: :secondary

Go somewhere

sui.link_to "Go somewhere", "#", variant: :outline

API

Prop	Type	Default	Description
variant	Symbol	:default	Visual style — one of `:default` `:destructive` `:outline` `:secondary` `:ghost` `:link`
size	Symbol	:default	Button size — one of `:xs` `:sm` `:default` `:lg` `:icon`
name	String	nil	Label text when no block is given
type	String	"button"	HTML button type attribute (`"button"`, `"submit"`, `"reset"`)

Next: Badge →