Empty - Hakumi Components

Basic

Simplest Usage.

No data

Code

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

Choose image

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

No data

Code

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

Customize

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

Customize Description

Code

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

No description

Simplest Usage with no description.

Code

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

Empty API

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

I18n Keys

The component uses Rails I18n for default description. Override via I18n config with scope hakumi_components.empty.

Prop	Type	Default	Description
`description`	`String`	`"No data"`	Default description text when no description prop is provided.

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.