Button to

A Rails method form with one typed submit Button and layout-transparent form root.

Source: app/components/nitro_kit/button_to.rb
API: NitroKit::ButtonTo.new(text, href:, method:, variant:)

Rails mutations

A layout-transparent Rails method form carries one typed submit Button.

Mutation treatments

Patch

Delete

Icon only

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/button_to_page.rb

sample("Patch", slug: "patch") do
  render NitroKit::ButtonTo.new(
    "Archive project",
    href: "#archive-project",
    method: :patch,
    id: "gallery-button-to-archive",
    icon: :archive
  )
end
sample("Delete", slug: "delete") do
  render NitroKit::ButtonTo.new(
    "Delete project",
    href: "#delete-project",
    method: :delete,
    icon: :trash,
    variant: :destructive,
    data: { turbo_confirm: "Delete this project?" }
  )
end
sample("Icon only", slug: "icon-only") do
  render NitroKit::ButtonTo.new(
    nil,
    href: "#revoke-token",
    method: :delete,
    id: "gallery-button-to-revoke",
    icon: :x,
    label: "Revoke API token",
    size: :xs
  )
end

Boundaries and states

GET forms, disabled and loading submits, and the nested button_* boundaries that decorate the trigger instead of the form root.

GET

Disabled

Loading

Nested button boundaries

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/button_to_page.rb

sample("GET", slug: "get") do
  render NitroKit::ButtonTo.new(
    "View audit log",
    href: "#audit-log",
    method: :get,
    id: "gallery-button-to-get"
  )
end
sample("Disabled", slug: "disabled") do
  render NitroKit::ButtonTo.new(
    "Delete workspace",
    href: "#delete-locked",
    method: :delete,
    id: "gallery-button-to-disabled",
    variant: :destructive,
    disabled: true
  )
end
sample("Loading", slug: "loading") do
  render NitroKit::ButtonTo.new(
    "Archiving project",
    href: "#archive-loading",
    method: :patch,
    id: "gallery-button-to-loading",
    loading: true
  )
end
sample("Nested button boundaries", slug: "nested-boundaries") do
  render NitroKit::ButtonTo.new(
    "Export data",
    href: "#export-data",
    id: "gallery-button-to-boundaries",
    button_html: { title: "Runs in the background" },
    button_aria: { keyshortcuts: "Meta+E" },
    button_data: { turbo_submits_with: "Exporting…" }
  )
end

Component contract

Constructor options, rendered root, closed vocabularies, and compound boundary for this component, exactly as shipped.

docs/component_contracts.md · NitroKit::ButtonTo

Constructor-specific options: optional text or block
required href:
method: :post
Button treatment options
root html:, aria:, data:
nested button_html:, button_aria:, button_data:
Root and closed vocabulary: form[data-nk=button-to] containing one slotted submit Button; methods get post patch put delete
Compound contract: Uses Rails form semantics, including method emulation and authenticity tokens, for mutations that must not be represented as links. The form root is layout-transparent. Turbo confirmation/frame attributes normally belong on root data:; nested trigger attributes such as Tooltip relationships use the button_* boundaries.

System rules for coding agents

Instructions for coding agents, repeated on every component page so one fetched page has enough context. Humans can usually skip this section.

test/dummy/app/components/gallery/agent_rules.rb

View agent instructions

Nitro Kit 2.0 is a gem-owned, Phlex-only UI system for Rails. Render components directly: render NitroKit::Button.new("Save", variant: :primary).
Compose Nitro components inside application-owned Phlex classes. Public initializers and declared slots are the component API; private methods are not.
Public options are explicit keywords, and enumerated options are closed vocabularies. Invalid names or values raise ArgumentError; this component's accepted options are in the contract above.
Pass native attributes through their typed boundary: html: for HTML, aria: for ARIA, and data: for application data. class and style are forbidden, including inside html:.
Nitro owns NitroKit::Component::RESERVED_DATA_ATTRIBUTES: data-nk, data-slot, data-variant, data-size, data-nk-escape, data-enhanced, data-state, data-disabled, data-required, data-orientation, data-presentation, data-placement, data-layout, data-side, data-field-type, data-dir, data-gap, data-align, data-justify, data-wrap, data-cols, data-mode, data-key. Do not pass them through data:. data-action, data-controller are additive and compose with Nitro behavior.
If an integration truly requires a class, use desperately_need_a_class:. It requires a non-blank String and marks the exception with data-nk-escape="class".
Every root emits data-nk; owned parts emit component-qualified data-slot values such as field-control or card-title. Select on those attributes, never on classes.
Customize components with documented --nk-* custom properties in an application stylesheet. Variables beginning with --_nk-* are private component mechanics.
Use NitroKit::Flex and NitroKit::Grid for layout. Parents own external placement and available width; components own their intrinsic geometry.
Preserve native elements and accessibility semantics. State is exposed through native semantics and ARIA first, and through data-state when styling or behavior also needs it.