h1. Hakumi Components

h2. Hakumi Components

h3. Hakumi Components

h4. Hakumi Components

h5. Hakumi Components

Code

<%= render(Hakumi::Typography::Title::Component.new(level: 1)) { "h1. Hakumi Components" } %>
<%= render(Hakumi::Typography::Title::Component.new(level: 2)) { "h2. Hakumi Components" } %>
<%= render(Hakumi::Typography::Title::Component.new(level: 3)) { "h3. Hakumi Components" } %>
<%= render(Hakumi::Typography::Title::Component.new(level: 4)) { "h4. Hakumi Components" } %>
<%= render(Hakumi::Typography::Title::Component.new(level: 5)) { "h5. Hakumi Components" } %>

Text Types

Display text in different types.

Hakumi Components (default) Hakumi Components (secondary) Hakumi Components (success) Hakumi Components (warning) Hakumi Components (danger) Hakumi Components (disabled)

Code

<%= render(Hakumi::Typography::Text::Component.new) { "Hakumi Components (default)" } %>
<%= render(Hakumi::Typography::Text::Component.new(type: :secondary)) { "Hakumi Components (secondary)" } %>
<%= render(Hakumi::Typography::Text::Component.new(type: :success)) { "Hakumi Components (success)" } %>
<%= render(Hakumi::Typography::Text::Component.new(type: :warning)) { "Hakumi Components (warning)" } %>
<%= render(Hakumi::Typography::Text::Component.new(type: :danger)) { "Hakumi Components (danger)" } %>
<%= render(Hakumi::Typography::Text::Component.new(disabled: true)) { "Hakumi Components (disabled)" } %>

Text Styles

Display text in different styles.

Hakumi Components (mark) Hakumi Components (code) Hakumi Components (keyboard) Hakumi Components (underline) ~~Hakumi Components (delete)~~ Hakumi Components (strong) Hakumi Components (italic)

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :small)) do %>
  <%= render(Hakumi::Typography::Text::Component.new(mark: true)) { "Hakumi Components (mark)" } %>
  <%= render(Hakumi::Typography::Text::Component.new(code: true)) { "Hakumi Components (code)" } %>
  <%= render(Hakumi::Typography::Text::Component.new(keyboard: true)) { "Hakumi Components (keyboard)" } %>
  <%= render(Hakumi::Typography::Text::Component.new(underline: true)) { "Hakumi Components (underline)" } %>
  <%= render(Hakumi::Typography::Text::Component.new(delete: true)) { "Hakumi Components (delete)" } %>
  <%= render(Hakumi::Typography::Text::Component.new(strong: true)) { "Hakumi Components (strong)" } %>
  <%= render(Hakumi::Typography::Text::Component.new(italic: true)) { "Hakumi Components (italic)" } %>
<% end %>

Interactive

Provide additional interactive capacity.

This is a copyable paragraph.

Custom copied text.

Code

<%= render(Hakumi::Typography::Paragraph::Component.new(copyable: true)) { "This is a copyable paragraph." } %>
<%= render(Hakumi::Typography::Paragraph::Component.new(copyable: true, copied_text: "Done!")) { "Custom copied text." } %>

Link

Link typography with primary color and dark-mode support.

Default link

This paragraph contains a link inside text using Hakumi::Typography::Link::Component.

Code

<%= render(Hakumi::Space::Component.new(direction: :vertical, size: :middle)) do %>
  <%= render(Hakumi::Typography::Link::Component.new(href: "#")) do %>
    Default link
  <% end %>

  <%= render(Hakumi::Typography::Paragraph::Component.new) do %>
    This paragraph contains a
    <%= render(Hakumi::Typography::Link::Component.new(href: "#")) do %>
      link inside text
    <% end %>
    using Hakumi::Typography::Link::Component.
  <% end %>
<% end %>

Typography Base Props (Text / Paragraph / Title / Link)

Prop	Type	Default	Description
`type`	`:secondary \| :success \| :warning or :danger`	`-`	Color emphasis.
`disabled`	`Boolean`	`false`	Apply disabled style.
`mark`	`Boolean`	`false`	Wrap text with <mark>.
`code`	`Boolean`	`false`	Render as inline code.
`keyboard`	`Boolean`	`false`	Render as <kbd>.
`underline`	`Boolean`	`false`	Underline text.
`delete`	`Boolean`	`false`	Strikethrough text.
`strong`	`Boolean`	`false`	Bold text.
`italic`	`Boolean`	`false`	Italicize text.
`copyable`	`Boolean`	`false`	Enable copy-to-clipboard icon.
`copied_text`	`String`	`"Copied!"`	Toast text when copy succeeds.
`copy_error_text`	`String`	`"Copy failed"`	Toast text when copy fails.
`content slot`	`Slot`	`-`	Typography content.
`**html_options`	`Keyword args`	`-`	Extra attributes merged into wrapper. Pass as kwargs (e.g., `class:`, `style:`, `data:`).

Typography::Title API

Prop	Type	Default	Description
`level`	`1..5`	`1`	heading level rendered as <h1>-<h5>.

Typography::Paragraph API

Prop	Type	Default	Description
`(inherits base props)`	`-`	`-`	Uses <div> tag with text modifiers.

Typography::Link API

Prop	Type	Default	Description
`href`	`String`	`required`	Destination URL.
`target`	`String`	`-`	Anchor target (e.g., _blank).
`rel`	`String`	`-`	rel attribute for security (e.g., noopener).