Extending Lookbook / Custom Tags

Using Tag Data

Custom tags are most useful when combined with a custom preview inspector panel to display the data.

In custom panels

Class tags

Tags added to the preview at the class level are available via the #tags method on the preview object:

# @design figma https://share.figma.com/my-org/button-component
class ButtonComponentPreview < Lookbook::Preview
  # ...
end
<% preview.tags(:design).each do |tag| %>
  <!-- `tag` object is a CustomTag instance -->
<% end %>

Scenario tags

Tags added to individual scenarios (methods) are available via the #tags method on the target:

class ButtonComponentPreview < Lookbook::Preview
  # @design sketch https://share.sketch.com/my-org/fancy-button-variant
  def fancy_button
    render ButtonComponent.new(fancy: true) do
      "Click me"
    end
  end
end
<% target.tags(:design).each do |tag| %>
  <!-- `tag` object is a CustomTag instance -->
<% end %>

User Guide

Extending Lookbook

API

Elsewhere