Skip to content
Nitro Kitv2.0.0.alpha.4

Search gallery…

IntroductionGalleryAgent guideGalleryHuman guideGalleryColorsFoundations · ThemeTypographyFoundations · ThemeSpacing & sizingFoundations · ThemeEffectsFoundations · ThemeButtonComponents · ActionsButton groupComponents · ActionsButton toComponents · ActionsAppearance pickerComponents · FormsCheckboxComponents · FormsCheckbox groupComponents · FormsComboboxComponents · FormsControl groupComponents · FormsDropzoneComponents · FormsFieldComponents · FormsField groupComponents · FormsFieldsetComponents · FormsInputComponents · FormsLabelComponents · FormsRadio buttonComponents · FormsRadio button groupComponents · FormsRich text areaComponents · FormsSelectComponents · FormsSwitchComponents · FormsTextareaComponents · FormsCommand paletteComponents · OverlaysDialogComponents · OverlaysDropdownComponents · OverlaysSheetComponents · OverlaysTooltipComponents · OverlaysAlertComponents · FeedbackEmpty stateComponents · FeedbackToastComponents · FeedbackAccordionComponents · Data displayAvatarComponents · Data displayAvatar stackComponents · Data displayBadgeComponents · Data displayDetails tableComponents · Data displayIconComponents · Data displayProgressive imageComponents · Data displayStat gridComponents · Data displayTableComponents · Data displayTypesetComponents · Data displayPaginationComponents · NavigationPagination barComponents · NavigationTabsComponents · NavigationToolbarComponents · NavigationCardComponents · LayoutContainerComponents · LayoutFlexComponents · LayoutGridComponents · LayoutApplication navigationComponents · ApplicationApplication shellComponents · ApplicationAuthentication shellComponents · ApplicationDanger zoneComponents · ApplicationData sectionComponents · ApplicationForm sectionComponents · ApplicationPage headerComponents · ApplicationSettings layoutComponents · ApplicationSign inCompositions · Access & onboardingPassword resetCompositions · Access & onboardingEmail verificationCompositions · Access & onboardingInvitation acceptanceCompositions · Access & onboardingAccount creationCompositions · Access & onboardingAccount securityCompositions · Access & onboardingWorkspace onboardingCompositions · Access & onboardingBranched onboardingCompositions · Access & onboardingWorkspace dashboardCompositions · Workspace & organizationWorkspace settingsCompositions · Workspace & organizationWorkspace usersCompositions · Workspace & organizationTeam managementCompositions · Workspace & organizationAPI credentialsCompositions · Workspace & organizationOrganization overviewCompositions · Workspace & organizationOrganization settingsCompositions · Workspace & organizationTeam activityCompositions · Workspace & organizationTeam memberCompositions · Workspace & organizationSubscription billingCompositions · Billing & commerceCheckout and paymentCompositions · Billing & commerceCheckout resultsCompositions · Billing & commerceData resource overviewCompositions · Data & operationsData resource activityCompositions · Data & operationsData resource settingsCompositions · Data & operationsProduct resource lifecycleCompositions · Data & operationsAPI webhooksCompositions · Data & operationsIntegration managementCompositions · Data & operationsFile uploadsCompositions · Data & operationsActivity and audit logCompositions · Data & operationsChangelogCompositions · Product & supportHelp centerCompositions · Product & supportSystem status and errorsCompositions · Product & supportProduct landingCompositions · MarketingPublic pricingCompositions · MarketingProduct featuresCompositions · MarketingPublic contactCompositions · MarketingSidebar operations applicationCompositions · Complete applicationsTopbar media applicationCompositions · Complete applicationsHybrid account applicationCompositions · Complete applications

No destinations found.

  • Introduction
  • Agent guide
  • Human guide
  • Foundations
    • Colors
    • Typography
    • Spacing & sizing
    • Effects
  • Actions
    • Button
    • Button group
    • Button to
  • Forms
    • Appearance picker
    • Checkbox
    • Checkbox group
    • Combobox
    • Control group
    • Dropzone
    • Field
    • Field group
    • Fieldset
    • Input
    • Label
    • Radio button
    • Radio button group
    • Rich text area
    • Select
    • Switch
    • Textarea
  • Overlays
    • Command palette
    • Dialog
    • Dropdown
    • Sheet
    • Tooltip
  • Feedback
    • Alert
    • Empty state
    • Toast
  • Data display
    • Accordion
    • Avatar
    • Avatar stack
    • Badge
    • Details table
    • Icon
    • Progressive image
    • Stat grid
    • Table
    • Typeset
  • Navigation
    • Pagination
    • Pagination bar
    • Tabs
    • Toolbar
  • Layout
    • Card
    • Container
    • Flex
    • Grid
  • Application
    • Application navigation
    • Application shell
    • Authentication shell
    • Danger zone
    • Data section
    • Form section
    • Page header
    • Settings layout
  • Access & onboarding
    • Sign in
    • Password reset
    • Email verification
    • Invitation acceptance
    • Account creation
    • Account security
    • Workspace onboarding
    • Branched onboarding
  • Workspace & organization
    • Workspace dashboard
    • Workspace settings
    • Workspace users
    • Team management
    • API credentials
    • Organization overview
    • Organization settings
    • Team activity
    • Team member
  • Billing & commerce
    • Subscription billing
    • Checkout and payment
    • Checkout results
  • Data & operations
    • Data resource overview
    • Data resource activity
    • Data resource settings
    • Product resource lifecycle
    • API webhooks
    • Integration management
    • File uploads
    • Activity and audit log
  • Product & support
    • Changelog
    • Help center
    • System status and errors
  • Marketing
    • Product landing
    • Public pricing
    • Product features
    • Public contact
  • Complete applications
    • Sidebar operations application
    • Topbar media application
    • Hybrid account application

Danger zone

Impact anatomy around a caller-owned confirmation composition and explicit safe escape.

Source
The confirmation leaf can be a Rails form or Dialog composition. Hidden IDs, authorization, consent, routes, and method semantics remain application code.
API
Supply the required title and description through constructor text or matching compound methods. confirmation requires exactly one caller block. escape is optional and accepts at most one non-destructive NitroKit::Button.

Impact, confirmation, and escape

Nitro owns warning anatomy while applications own confirmation mechanics and destructive policy.

Direct confirmation form

Revoke all sessions

Every browser and device will need to authenticate again.

Keep sessions
ViewportFull width
Rubytest/dummy/app/components/gallery/components/danger_zone_page.rb
render NitroKit::DangerZone.new(
  title: "Revoke all sessions",
  description: "Every browser and device will need to authenticate again.",
  level: 4,
  id: "gallery-danger-zone-form"
) do |zone|
  zone.confirmation do
    form(action: "#revoke", method: :post, id: "gallery-danger-zone-revoke-form") do
      render NitroKit::Button.new("Revoke sessions", type: :submit, variant: :destructive)
    end
  end
  zone.escape NitroKit::Button.new("Keep sessions", href: "#security")
end

Disabled by caller policy

Delete workspace

Transfer workspace ownership before deletion becomes available.

Review ownership
ViewportFull width
Rubytest/dummy/app/components/gallery/components/danger_zone_page.rb
render NitroKit::DangerZone.new(
  title: "Delete workspace",
  description: "Transfer workspace ownership before deletion becomes available.",
  level: 4,
  id: "gallery-danger-zone-disabled"
) do |zone|
  zone.confirmation do
    render NitroKit::ButtonTo.new(
      "Delete workspace",
      href: "#delete-disabled",
      id: "gallery-danger-zone-disabled-form",
      variant: :destructive,
      disabled: true
    )
  end
  zone.escape NitroKit::Button.new("Review ownership", href: "#ownership")
end

Dialog confirmation

Delete production credential

Requests using this secret will fail immediately and the secret cannot be recovered.

Delete Production Deploy credential?

Confirm only after every production client has rotated to another credential.
Return to credentials
ViewportFull width
Rubytest/dummy/app/components/gallery/components/danger_zone_page.rb
render NitroKit::DangerZone.new(
  title: "Delete production credential",
  description: "Requests using this secret will fail immediately and the secret cannot be recovered.",
  level: 4,
  id: "gallery-danger-zone-dialog"
) do |zone|
  zone.confirmation do
    render NitroKit::Dialog.new(id: "gallery-danger-zone-confirm-dialog") do |dialog|
      dialog.trigger("Review deletion", variant: :destructive)
      dialog.panel(
        title: "Delete Production Deploy credential?",
        description: "Confirm only after every production client has rotated to another credential."
      ) do
        form(action: "#delete-credential", method: :post, id: "gallery-danger-zone-dialog-form") do
          render NitroKit::FieldGroup.new do
            render NitroKit::Field.new(nil, :confirmation, label: "Type Production Deploy", required: true)
            render NitroKit::Button.new("Delete credential", type: :submit, variant: :destructive)
          end
        end
        dialog.close_button(label: "Cancel deletion")
      end
    end
  end
  zone.escape NitroKit::Button.new("Return to credentials", href: "#credentials")
end

Settings footer without an escape

At the bottom of a settings page there is nothing to escape to, so the escape action is omitted.

Delete this project

Deleting removes every task, comment, and attachment in this project.

ViewportFull width
Rubytest/dummy/app/components/gallery/components/danger_zone_page.rb
render NitroKit::DangerZone.new(
  title: "Delete this project",
  description: "Deleting removes every task, comment, and attachment in this project.",
  level: 4,
  id: "gallery-danger-zone-no-escape"
) do |zone|
  zone.confirmation do
    render NitroKit::ButtonTo.new(
      "Delete project",
      href: "#delete-project",
      id: "gallery-danger-zone-no-escape-form",
      variant: :destructive
    )
  end
end

Long nested impact

Permanently delete International Research, Production, and Reliability Engineering

This removes every project, service credential, invoice attachment, audit event, pending invitation, and retained operational export for all regions. Regulatory archives outside this workspace are unaffected and must be managed separately.

Keep workspace and return to settings
ViewportFull width
Rubytest/dummy/app/components/gallery/components/danger_zone_page.rb
render NitroKit::Container.new(size: :lg, id: "gallery-danger-zone-long-container") do
  render NitroKit::DangerZone.new(
    title: "Permanently delete International Research, Production, and Reliability Engineering",
    description: "This removes every project, service credential, invoice attachment, audit event, pending invitation, and retained operational export for all regions. Regulatory archives outside this workspace are unaffected and must be managed separately.",
    level: 4,
    id: "gallery-danger-zone-long"
  ) do |zone|
    zone.confirmation do
      render NitroKit::ButtonTo.new(
        "Permanently delete workspace",
        href: "#delete-long",
        id: "gallery-danger-zone-long-form",
        variant: :destructive
      )
    end
    zone.escape NitroKit::Button.new("Keep workspace and return to settings", href: "#settings")
  end
end

Component contract

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

docs/component_contracts.md · NitroKit::DangerZone

Constructor
title: nil, description: nil, level: 2, id: nil
Root
section[data-nk=danger-zone]; title levels 1..6
Compound contract
Requires title and description, each through constructor text or one matching text/rich-content compound declaration. Exactly one confirmation block and at most one non-destructive Button through escape; the description renders in the danger-zone-description slot.

Relevant patterns

Application conventions this component belongs to. Each summary is the leading section of its pattern document.

docs/patterns/destructive_action.md

Destructive action

  • Use NitroKit::Dialog when the user must review impact or type confirmation; use Turbo's native browser confirmation for a one-sentence consequence.
  • A real Rails form owns the request, and the server owns authorization.
  • Put permanent deletion on the edit route, not the operational show route.
  • Use a server-rendered review route when confirmation must work without JavaScript or Invoker Commands.

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.