Button group

One labelled action group containing typed Button children.

Source: app/components/nitro_kit/button_group.rb
API: NitroKit::ButtonGroup.new(label:) { |group| group.button }

Member counts

One, two, and larger groups share the same labelled native group contract.

Count scale

One action

Two actions

Four actions

Viewport640 px · sm

Width

Preset

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

sample("One action", slug: "one") do
  render NitroKit::ButtonGroup.new(
    id: "gallery-button-group-one",
    label: "Single record action",
    buttons: [
      NitroKit::Button.new(
        "Edit",
        id: "gallery-button-group-one-edit",
        icon: :pencil
      )
    ]
  )
end
sample("Two actions", slug: "two") do
  render NitroKit::ButtonGroup.new(
    id: "gallery-button-group-two",
    label: "Form actions"
  ) do |group|
    group.button("Save", id: "gallery-button-group-two-save", variant: :primary)
    group.button("Cancel", id: "gallery-button-group-two-cancel")
  end
end
sample("Four actions", slug: "four") do
  render NitroKit::ButtonGroup.new(
    id: "gallery-button-group-four",
    label: "Document actions"
  ) do |group|
    group.button("Open", id: "gallery-button-group-four-open")
    group.button("Duplicate", id: "gallery-button-group-four-duplicate")
    group.button("Archive", id: "gallery-button-group-four-archive")
    group.button("Delete", id: "gallery-button-group-four-delete", variant: :destructive)
  end
end

Mixed actions

Buttons, links, leading and trailing icons, long labels, blocks, and disabled state can coexist.

Mixed member contract

Return to audit log Export every selected record as a comma-separated value file

ViewportFull width

Width

Preset

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

render NitroKit::ButtonGroup.new(
  id: "gallery-button-group-mixed",
  label: "Audit record actions"
) do |group|
  group.button(
    "Return to audit log",
    id: "gallery-button-group-mixed-back",
    href: "#audit-log",
    icon: :arrow_left
  )
  group.button(
    "Export every selected record as a comma-separated value file",
    id: "gallery-button-group-mixed-export",
    href: "#audit-export",
    icon: :download
  )
  group.button(
    "Archive",
    id: "gallery-button-group-mixed-archive",
    icon_end: :archive,
    disabled: true
  )
  group.button(
    id: "gallery-button-group-mixed-delete",
    icon: :trash_2,
    variant: :destructive,
    aria: { label: "Delete selected audit records" }
  )
  group.button(id: "gallery-button-group-mixed-block") { "Block-provided action" }
end

Group defaults

A group-level variant and size become the default every member inherits.

Inherited treatment

ViewportFull width

Width

Preset

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

render NitroKit::ButtonGroup.new(
  id: "gallery-button-group-defaults",
  label: "Release actions",
  variant: :primary,
  size: :lg
) do |group|
  group.button("Promote release", id: "gallery-button-group-defaults-promote")
  group.button("Compare builds", id: "gallery-button-group-defaults-compare")
  group.button(
    "Roll back",
    id: "gallery-button-group-defaults-rollback",
    variant: :destructive
  )
end

API credential

Production API key

Read and write

nk_live_7P3F · Last used July 13, 2026 at 08:31 UTC

Viewport640 px · sm

Width

Preset

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

render NitroKit::Card.new(id: "gallery-button-group-record-card") do |card|
  card.title("Production API key", level: 3)
  card.body do
    render NitroKit::Badge.new(
      "Read and write",
      id: "gallery-button-group-record-access",
      color: :info,
      size: :sm
    )
    p { "nk_live_7P3F · Last used July 13, 2026 at 08:31 UTC" }
  end
  card.footer do
    render NitroKit::ButtonGroup.new(
      id: "gallery-button-group-record-actions",
      label: "Production API key actions"
    ) do |group|
      group.button(
        "Copy prefix",
        id: "gallery-button-group-record-copy",
        icon: :copy
      )
      group.button(
        "Rotate key",
        id: "gallery-button-group-record-rotate",
        icon: :refresh_cw
      )
      group.button(
        "Revoke",
        id: "gallery-button-group-record-revoke",
        variant: :destructive,
        icon: :trash_2
      )
    end
  end
end

Selected members

Selected workspace members
Name	Role	Status
Ada Lovelace	Owner	Active
Grace Hopper	Admin	Active

ViewportFull width

Width

Preset

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

render NitroKit::ButtonGroup.new(
  id: "gallery-button-group-table-actions",
  label: "Two selected member actions"
) do |group|
  group.button("Change role", id: "gallery-button-group-table-role", icon: :user_cog)
  group.button("Deactivate", id: "gallery-button-group-table-deactivate", disabled: true)
  group.button(
    "Remove",
    id: "gallery-button-group-table-remove",
    variant: :destructive,
    icon: :user_minus
  )
end

render NitroKit::Table.new(
  id: "gallery-button-group-members-table",
  table_html: { id: "gallery-button-group-members-table-element" }
) do |table|
  table.caption("Selected workspace members")
  table.thead do
    table.tr do
      table.th("Name")
      table.th("Role")
      table.th("Status", align: :right)
    end
  end
  table.tbody do
    Gallery::Data.members.first(2).each do |member|
      table.tr do
        table.th(member.name, scope: :row)
        table.td(member.role.to_s.humanize)
        table.td(member.status.to_s.humanize, align: :right)
      end
    end
  end
end

Component contract

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

docs/component_contracts.md · NitroKit::ButtonGroup

Constructor-specific options: buttons: [], label: nil, variant: nil, size: nil, id: nil
Root and closed vocabulary: div[data-nk=button-group][role=group]
Compound contract: Requires one or more Buttons through buttons:, add, or button. Only NitroKit::Button is accepted and the same instance cannot appear twice. button forwards its arguments verbatim to Button.new, so unknown keywords raise from Button. Group-level variant: and size: are validated against Button vocabularies and fill in only where a button declaration stays silent; instances passed to buttons: or add keep their own treatment. label: and aria: { label: } are the same attribute and collide.

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.