Hakumi :: Rails ViewComponents

Basic

Simplest Usage.

No data

Code

<%= render(Hakumi::Empty::Component.new) %>

Choose image

You can choose another style of image by setting image to :simple.

No data

Code

<%= render(Hakumi::Empty::Component.new(image: :simple)) %>

Customize

Customize image source, image size, description and extra content.

Customize Description

Code

<%= render(Hakumi::Empty::Component.new(
  image: "https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg",
  image_height: 60,
  description: "Customize Description"
)) do %>
  <%= render(Hakumi::Button::Component.new(type: :primary)) do %>
    Create Now
  <% end %>
<% end %>

No description

Simplest Usage with no description.

Code

<%= render(Hakumi::Empty::Component.new(description: false)) %>

Empty API

Prop	Type	Default	Description
`image`	`Symbol \| String or ViewComponent`	`:default`	Custom image. Built-in options: :default, :simple. Pass a URL string or ViewComponent for custom images.
`image_height`	`Integer`	`-`	Custom height for the image container in pixels.
`description`	`String or false`	`"No data"`	Description text displayed below the image. Pass false to hide the description.
`content slot`	`Slot`	`-`	Extra content (e.g., action buttons) rendered in the footer area.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into the wrapper div. Pass as kwargs (e.g., class:, style:, data:).

Built-in Images

Prop	Type	Default	Description
`:default`	`Symbol`	`-`	Default larger image with document illustration and speech bubble.
`:simple`	`Symbol`	`-`	Simplified, smaller image suitable for embedded use in tables, lists, etc.