Button

Example

<%= nk_button("Button") %>

See API compatibility for link_to and button_to examples.

Install

Set up Nitro Kit then

bin/rails generate nitro_kit:add button

Files generated

Variants

Nitro Kit gives you 4 variants by default. Most buttons in your app should just be buttons. Every page should preferably not have more than one primary button.

nk_button

nk_primary_button

nk_destructive_button

nk_ghost_button

<div class="flex flex-col gap-6 text-sm">
  <div class="space-y-2">
    <p><code>nk_button</code></p>
    <%= nk_button "Button" %>
  </div>
  <div class="space-y-2">
    <p><code>nk_primary_button</code></p>
    <%= nk_primary_button "Primary" %>
  </div>
  <div class="space-y-2">
    <p><code>nk_destructive_button</code></p>
    <%= nk_destructive_button "Destructive" %>
  </div>
  <div class="space-y-2">
    <p><code>nk_ghost_button</code></p>
    <%= nk_ghost_button "Ghost" %>
  </div>
</div>

Sizes

:xs

:sm

:md

<div class="flex gap-4 items-center text-xs text-center">
  <div class="flex flex-col gap-4">
    <%= nk_button "Extra small", size: :xs %>
    <code>:xs</code>
  </div>
  <div class="flex flex-col gap-4">
    <%= nk_button "Small", size: :sm %>
    <code>:sm</code>
  </div>
  <div class="flex flex-col gap-4">
    <%= nk_button "Medium", size: :md %>
    <code>:md</code>
  </div>
</div>

With icons

<%= nk_button(icon: "fuel") %>
<%= nk_button("Text and icon", icon: "caravan") %>
<%= nk_button("Icon right", icon_right: "car") %>

Button groups

<%= nk_button_group do %>
  <%= nk_button("Button") %>
  <%= nk_button("Button") %>
  <%= nk_primary_button("Button") %>
<% end %>

API compatibility

nk_button_link_to

Matches link_to

Go home

nk_button_to

Matches button_to

<div class="grid flex-1 grid-cols-2">
  <div class="grid gap-2 place-items-center">
    <code>nk_button_link_to</code>
    <p class="text-sm">Matches
      <a
        href="https://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to"
        target="_blank"
        class="link"
      ><code>link_to</code></a></p>
    <%= nk_button_link_to "Go home", root_path %>
  </div>

  <div class="grid gap-2 place-items-center">
    <code>nk_button_to</code>
    <p class="text-sm">Matches
      <a
        href="https://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to"
        target="_blank"
        class="link"
      ><code>button_to</code></a></p>
    <div class="flex gap-2 items-center">
      <%= nk_destructive_button_to "Delete post",
      posts_path,
      method: :delete,
      data: {
        turbo_frame: "test-result",
      } %>
      <%= turbo_frame_tag("test-result", class: "text-destructive-foreground") %>
    </div>
  </div>
</div>

<%= nk_button_link_to "Go home", root_path %>

<%= nk_destructive_button_to "Delete post", posts_path,
    method: :delete, data: { turbo_frame: "test-result" }  %>

Usage

`nk_button( text = nil, href: nil, variant: :default, size: :md, icon: nil, icon_right: nil, **attrs ) { ... }`
Property	Default	Description
`text`	`nil`	Plain text content
`href`	`nil`	If truthy, the button will be an `a` element. Otherwise it's `button`.
`variant`	`:default`	One of `:default` / `:primary` / `:destructive` / `:ghost`
`size`	`:md`	One of `:xs` / `:sm` / `:md`
`icon`	`nil`	Left side icon. See Icon docs.
`icon_right`	`nil`	Right side icon. See Icon docs.
`**attrs`		HTML attributes for `<button>` element

`nk_button_group(**attrs) { ... }`
Property	Default	Description
`**attrs`		HTML attributes for `<div>` element