Skip to content

Blankslate

Use Primer::BlankslateComponent when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.

Examples

Basic

<%= render Primer::BlankslateComponent.new(
title: "Title",
description: "Description",
) %>

Icon

Add an icon to give additional context. Refer to the Octicons documentation to choose an icon.

<%= render Primer::BlankslateComponent.new(
icon: "octoface",
title: "Title",
description: "Description",
) %>

Loading

Add a SpinnerComponent to the blankslate in place of an icon.

<%= render Primer::BlankslateComponent.new(
title: "Title",
description: "Description",
) do |component| %>
<% component.slot(:spinner, size: :large) %>
<% end %>

Custom content

Pass custom content as a block in place of description.

<%= render Primer::BlankslateComponent.new(
title: "Title",
) do %>
<em>Your custom content here</em>
<% end %>

Action button

Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.

<%= render Primer::BlankslateComponent.new(
icon: "book",
title: "Welcome to the mona wiki!",
description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
button_text: "Create the first page",
button_url: "https://github.com/monalisa/mona/wiki/_new",
) %>

Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:

<%= render Primer::BlankslateComponent.new(
icon: "book",
title: "Welcome to the mona wiki!",
description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
link_text: "Learn more about wikis",
link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
) %>

Variations

There are a few variations of how the Blankslate appears: narrow adds a maximum width, large increases the font size, and spacious adds extra padding.

<%= render Primer::BlankslateComponent.new(
icon: "book",
title: "Welcome to the mona wiki!",
description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
narrow: true,
large: true,
spacious: true,
) %>

Arguments

NameTypeDefaultDescription
titleString""Text that appears in a larger bold font.
title_tagSymbol:h3HTML tag to use for title.
iconString""Octicon icon to use at top of component.
icon_sizeSymbol:mediumOne of :small (16), :medium (32), or :large (64).
image_srcString""Image to display.
image_altString" "Alt text for image.
descriptionString""Text that appears below the title. Typically a whole sentence.
button_textString""The text of the button.
button_urlString""The URL where the user will be taken after clicking the button.
button_classesString"btn-primary my-3"Classes to apply to action button
link_textString""The text of the link.
link_urlString""The URL where the user will be taken after clicking the link.
narrowBooleanfalseAdds a maximum width.
largeBooleanfalseIncreases the font size.
spaciousBooleanfalseAdds extra padding.

spinner slot

NameTypeDefaultDescription
sizeSymbolN/AOne of :small (16), :medium (32), or :large (64).
system_argumentsHashN/ASystem arguments