` tag."
},
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:danger`, `:default`, or `:invisible`."
},
{
"name": "size",
"type": "Symbol",
"default": "`:medium`",
"description": "One of `:large`, `:medium`, or `:small`."
},
{
"name": "disabled",
"type": "Boolean",
"default": "`false`",
"description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
},
{
"name": "type",
"type": "Symbol",
"default": "N/A",
"description": "One of `:button`, `:reset`, or `:submit`."
},
{
"name": "aria-label",
"type": "String",
"default": "N/A",
"description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
},
{
"name": "aria-description",
"type": "String",
"default": "N/A",
"description": "String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information."
},
{
"name": "show_tooltip",
"type": "Boolean",
"default": "`true`",
"description": "Whether or not to show a tooltip when this button is hovered. Tooltips should only be hidden if the aria label is redundant, i.e. if the icon has a widely understood definition."
},
{
"name": "tooltip_direction",
"type": "Symbol",
"default": "`:s`",
"description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Label",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Label",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/label.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/label/default/",
"parameters": [
{
"name": "tag",
"type": "Symbol",
"default": "`:span`",
"description": "One of `:a`, `:div`, `:span`, or `:summary`."
},
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:accent`, `:attention`, `:danger`, `:default`, `:done`, `:info`, `:orange`, `:primary`, `:purple`, `:secondary`, `:severe`, `:sponsors`, `:success`, or `:warning`."
},
{
"name": "size",
"type": "Symbol",
"default": "`:medium`",
"description": "One of `:large` or `:medium`."
},
{
"name": "inline",
"type": "Boolean",
"default": "`false`",
"description": "Whether or not to render this label inline."
},
{
"name": "variant",
"type": "Symbol",
"default": "`:none`",
"description": "One of `:inline`, `:large`, or `:none`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Link",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Link",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/link.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/link/default/",
"parameters": [
{
"name": "href",
"type": "String",
"default": "`nil`",
"description": "URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered."
},
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:default`, `:primary`, or `:secondary`."
},
{
"name": "muted",
"type": "Boolean",
"default": "`false`",
"description": "Uses light gray for Link color, and blue on hover."
},
{
"name": "underline",
"type": "Boolean",
"default": "`false`",
"description": "Whether or not to underline the link."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Markdown",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Markdown",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/markdown.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/markdown/default/",
"parameters": [
{
"name": "tag",
"type": "Symbol",
"default": "`:div`",
"description": "One of `:article`, `:div`, or `:td`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "NavList",
"status": "beta",
"a11y_reviewed": true,
"short_name": "NavList",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/default/",
"parameters": [
{
"name": "selected_item_id",
"type": "Symbol",
"default": "`nil`",
"description": "The ID of the currently selected item. The default is `nil`, meaning no item is selected."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "NavList::Divider",
"status": "alpha",
"a11y_reviewed": false,
"short_name": "NavListDivider",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/divider.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/divider/default/",
"parameters": [
{
"name": "scheme",
"type": "Symbol",
"default": "`:subtle`",
"description": "Display a background color if scheme is `filled`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "NavList::Group",
"status": "alpha",
"a11y_reviewed": true,
"short_name": "NavListGroup",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/group.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/group/default/",
"parameters": [
{
"name": "selected_item_id",
"type": "Symbol",
"default": "`nil`",
"description": "The ID of the currently selected item. Used internally."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "NavList::Heading",
"status": "alpha",
"a11y_reviewed": false,
"short_name": "NavListHeading",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/heading.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/heading/default/",
"parameters": [
{
"name": "title",
"type": "String",
"default": "N/A",
"description": "The text content of the heading."
},
{
"name": "id",
"type": "String",
"default": "`self.class.generate_id`",
"description": "The value of the ID HTML attribute. Auto-generated by default."
},
{
"name": "heading_level",
"type": "Integer",
"default": "`2`",
"description": "The heading level, i.e. 2 for an `
`, 3 for an ``, etc."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "NavList::Item",
"status": "alpha",
"a11y_reviewed": false,
"short_name": "NavListItem",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/item.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/item/default/",
"parameters": [
{
"name": "selected_item_id",
"type": "Symbol",
"default": "`nil`",
"description": "The ID of the currently selected list item. Used internally."
},
{
"name": "selected_by_ids",
"type": "Array",
"default": "`[]`",
"description": "The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected."
},
{
"name": "expanded",
"type": "Boolean",
"default": "`false`",
"description": "Whether this item shows (expands) or hides (collapses) its list of sub items."
},
{
"name": "sub_item",
"type": "Boolean",
"default": "`false`",
"description": "Whether or not this item is nested under a parent item. Used internally."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Octicon",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Octicon",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/octicon.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/octicon/default/",
"parameters": [
{
"name": "icon_name",
"type": "Symbol, String",
"default": "`nil`",
"description": "Name of [Octicon](https://primer.style/octicons/) to use."
},
{
"name": "icon",
"type": "Symbol, String",
"default": "`nil`",
"description": "Name of [Octicon](https://primer.style/octicons/) to use."
},
{
"name": "size",
"type": "Symbol",
"default": "`:small`",
"description": "One of `:xsmall` (`12`), `:small` (`16`), or `:medium` (`24`)."
},
{
"name": "use_symbol",
"type": "Boolean",
"default": "`false`",
"description": "EXPERIMENTAL (May change or be removed) - Set to true when using with [OcticonSymbols](/components/alpha/octiconsymbols)."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Popover",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Popover",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/popover.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/popover/default/",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "ProgressBar",
"status": "beta",
"a11y_reviewed": false,
"short_name": "ProgressBar",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/progress_bar.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/progress_bar/default/",
"parameters": [
{
"name": "size",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:default`, `:large`, or `:small`. Increases height."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "RelativeTime",
"status": "beta",
"a11y_reviewed": false,
"short_name": "RelativeTime",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/relative_time.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/relative_time/default/",
"parameters": [
{
"name": "datetime",
"type": "Time",
"default": "N/A",
"description": "The time to be formatted."
},
{
"name": "tense",
"type": "Symbol",
"default": "`:auto`",
"description": "Which tense to use. One of `:auto`, `:future`, or `:past`."
},
{
"name": "prefix",
"type": "sring",
"default": "`nil`",
"description": "What to prefix the relative ime display with."
},
{
"name": "second",
"type": "Symbol",
"default": "`SECOND_DEFAULT`",
"description": "What format seconds should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
"name": "minute",
"type": "Symbol",
"default": "`MINUTE_DEFAULT`",
"description": "What format minues should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
"name": "hour",
"type": "Symbol",
"default": "`HOUR_DEFAULT`",
"description": "What format hours should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
"name": "weekday",
"type": "Symbol",
"default": "`WEEKDAY_DEFAULT`",
"description": "What format weekdays should take. One of `nil`, `:long`, `:narrow`, or `:short`."
},
{
"name": "day",
"type": "Symbol",
"default": "`DAY_DEFAULT`",
"description": "What format days should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
"name": "month",
"type": "Symbol",
"default": "`MONTH_DEFAULT`",
"description": "What format months should take. One of `nil`, `:long`, `:narrow`, `:numeric`, `:short`, or `:two_digit`."
},
{
"name": "year",
"type": "Symbol",
"default": "`YEAR_DEFAULT`",
"description": "What format years should take. One of `nil`, `:numeric`, or `:two_digit`."
},
{
"name": "time_zone_name",
"type": "Symbol",
"default": "`TIMEZONENAME_DEFAULT`",
"description": "What format the time zone should take. One of `nil`, `:long`, `:long_generic`, `:long_offset`, `:short`, `:short_generic`, or `:short_offset`."
},
{
"name": "threshold",
"type": "string",
"default": "`nil`",
"description": "The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute."
},
{
"name": "precision",
"type": "Symbol",
"default": "`PRECISION_DEFAULT`",
"description": "The precision elapsed time should display. One of `nil`, `:day`, `:hour`, `:minute`, `:month`, `:second`, or `:year`."
},
{
"name": "format",
"type": "Symbol",
"default": "`nil`",
"description": "The format the display should take. One of `:auto`, `:elapsed`, or `:micro`."
},
{
"name": "format_style",
"type": "Symbol",
"default": "`nil`",
"description": "The format the display should take. One of `nil`, `:long`, `:narrow`, or `:short`."
},
{
"name": "lang",
"type": "string",
"default": "`nil`",
"description": "The language to use."
},
{
"name": "title",
"type": "string",
"default": "`nil`",
"description": "Provide a custom title to the element."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Spinner",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Spinner",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/spinner.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/spinner/default/",
"parameters": [
{
"name": "size",
"type": "Symbol",
"default": "`:medium`",
"description": "One of `[:large, 64]`, `[:medium, 32]`, or `[:small, 16]`."
},
{
"name": "style",
"type": "String",
"default": "`box-sizing: content-box; color: var(--color-icon-primary);`",
"description": "Custom element styles."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "State",
"status": "beta",
"a11y_reviewed": false,
"short_name": "State",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/state.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/state/default/",
"parameters": [
{
"name": "title",
"type": "String",
"default": "N/A",
"description": "`title` HTML attribute."
},
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
"description": "Background color. One of `:closed`, `:default`, `:green`, `:merged`, `:open`, `:purple`, or `:red`."
},
{
"name": "tag",
"type": "Symbol",
"default": "`:span`",
"description": "HTML tag for element. One of `:div` or `:span`."
},
{
"name": "size",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:default` or `:small`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Subhead",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Subhead",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/subhead.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/subhead/default/",
"parameters": [
{
"name": "spacious",
"type": "Boolean",
"default": "`false`",
"description": "Whether to add spacing to the Subhead."
},
{
"name": "hide_border",
"type": "Boolean",
"default": "`false`",
"description": "Whether to hide the border under the heading."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Text",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Text",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/text/default/",
"parameters": [
{
"name": "tag",
"type": "Symbol",
"default": "`:span`",
"description": ""
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "TimelineItem",
"status": "beta",
"a11y_reviewed": false,
"short_name": "TimelineItem",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/timeline_item.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/timeline_item/default/",
"parameters": [
{
"name": "condensed",
"type": "Boolean",
"default": "`false`",
"description": "Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "TimelineItem::Badge",
"status": "beta",
"a11y_reviewed": false,
"short_name": "TimelineItemBadge",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/timeline_item/badge.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/timeline_item/badge/default/",
"parameters": [
]
},
{
"component": "Truncate",
"status": "beta",
"a11y_reviewed": false,
"short_name": "Truncate",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/truncate.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/truncate/default/",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Truncate::TruncateText",
"status": "alpha",
"a11y_reviewed": false,
"short_name": "TruncateTruncateText",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/truncate/truncate_text.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/truncate/truncate_text/default/",
"parameters": [
]
},
{
"component": "Blankslate",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "Blankslate",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/blankslate_component.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/blankslate/default/",
"parameters": [
{
"name": "title",
"type": "String",
"default": "`\"\"`",
"description": "Text that appears in a larger bold font."
},
{
"name": "title_tag",
"type": "Symbol",
"default": "`:h3`",
"description": "HTML tag to use for title."
},
{
"name": "icon",
"type": "Symbol",
"default": "`\"\"`",
"description": "Octicon icon to use at top of component."
},
{
"name": "icon_size",
"type": "Symbol",
"default": "`:medium`",
"description": "One of `:xsmall` (`12`), `:small` (`16`), or `:medium` (`24`)."
},
{
"name": "image_src",
"type": "String",
"default": "`\"\"`",
"description": "Image to display."
},
{
"name": "image_alt",
"type": "String",
"default": "`\" \"`",
"description": "Alt text for image."
},
{
"name": "description",
"type": "String",
"default": "`\"\"`",
"description": "Text that appears below the title. Typically a whole sentence."
},
{
"name": "button_text",
"type": "String",
"default": "`\"\"`",
"description": "The text of the button."
},
{
"name": "button_url",
"type": "String",
"default": "`\"\"`",
"description": "The URL where the user will be taken after clicking the button."
},
{
"name": "button_classes",
"type": "String",
"default": "`\"btn-primary my-3\"`",
"description": "Classes to apply to action button"
},
{
"name": "link_text",
"type": "String",
"default": "`\"\"`",
"description": "The text of the link."
},
{
"name": "link_url",
"type": "String",
"default": "`\"\"`",
"description": "The URL where the user will be taken after clicking the link."
},
{
"name": "narrow",
"type": "Boolean",
"default": "`false`",
"description": "Adds a maximum width."
},
{
"name": "large",
"type": "Boolean",
"default": "`false`",
"description": "Increases the font size."
},
{
"name": "spacious",
"type": "Boolean",
"default": "`false`",
"description": "Adds extra padding."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Box",
"status": "stable",
"a11y_reviewed": false,
"short_name": "Box",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/box.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/box/default/",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Button",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "Button",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/button_component.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/button/default/",
"parameters": [
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`, or `:primary`."
},
{
"name": "variant",
"type": "Symbol",
"default": "`nil`",
"description": "DEPRECATED. One of `:medium` or `:small`."
},
{
"name": "size",
"type": "Symbol",
"default": "`:medium`",
"description": "One of `:medium` or `:small`."
},
{
"name": "tag",
"type": "Symbol",
"default": "`:button`",
"description": "One of `:a`, `:button`, or `:summary`."
},
{
"name": "type",
"type": "Symbol",
"default": "`:button`",
"description": "One of `:button`, `:reset`, or `:submit`."
},
{
"name": "group_item",
"type": "Boolean",
"default": "`false`",
"description": "Whether button is part of a ButtonGroup."
},
{
"name": "block",
"type": "Boolean",
"default": "`false`",
"description": "Whether button is full-width with `display: block`."
},
{
"name": "dropdown",
"type": "Boolean",
"default": "`false`",
"description": "Whether or not to render a dropdown caret."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "ConditionalWrapper",
"status": "alpha",
"a11y_reviewed": false,
"short_name": "ConditionalWrapper",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/conditional_wrapper.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/conditional_wrapper/default/",
"parameters": [
{
"name": "condition",
"type": "Boolean",
"default": "N/A",
"description": "Whether or not to wrap the content in a `Primer::BaseComponent`."
},
{
"name": "base_component_arguments",
"type": "Hash",
"default": "N/A",
"description": "The arguments to pass to `Primer::BaseComponent`."
}
]
},
{
"component": "Content",
"status": "stable",
"a11y_reviewed": false,
"short_name": "Content",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/content.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/content/default/",
"parameters": [
]
},
{
"component": "IconButton",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "IconButton",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/icon_button.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/icon_button/default/",
"parameters": [
{
"name": "scheme",
"type": "Symbol",
"default": "`:default`",
"description": "One of `:danger` or `:default`."
},
{
"name": "icon",
"type": "String",
"default": "N/A",
"description": "Name of [Octicon](https://primer.style/octicons/) to use."
},
{
"name": "tag",
"type": "Symbol",
"default": "N/A",
"description": "One of `:a`, `:button`, or `:summary`."
},
{
"name": "type",
"type": "Symbol",
"default": "N/A",
"description": "One of `:button`, `:reset`, or `:submit`."
},
{
"name": "aria-label",
"type": "String",
"default": "N/A",
"description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
},
{
"name": "aria-description",
"type": "String",
"default": "N/A",
"description": "String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information."
},
{
"name": "tooltip_direction",
"type": "Symbol",
"default": "`:s`",
"description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
},
{
"name": "box",
"type": "Boolean",
"default": "`false`",
"description": "Whether the button is in a [BorderBox](/components/beta/borderbox). If `true`, the button will have the `Box-btn-octicon` class."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Layout",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "Layout",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/layout_component.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/layout/default/",
"parameters": [
{
"name": "responsive",
"type": "Boolean",
"default": "`false`",
"description": "Whether to collapse layout to a single column at smaller widths."
},
{
"name": "side",
"type": "Symbol",
"default": "`:right`",
"description": "Which side to display the sidebar on. One of `:left` or `:right`."
},
{
"name": "sidebar_col",
"type": "Integer",
"default": "`3`",
"description": "Sidebar column width."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Navigation::Tab",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "NavigationTab",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/navigation/tab/default/",
"parameters": [
{
"name": "list",
"type": "Boolean",
"default": "`false`",
"description": "Whether the Tab is an item in a `` list."
},
{
"name": "selected",
"type": "Boolean",
"default": "`false`",
"description": "Whether the Tab is selected or not."
},
{
"name": "with_panel",
"type": "Boolean",
"default": "`false`",
"description": "Whether the Tab has an associated panel."
},
{
"name": "panel_id",
"type": "String",
"default": "`\"\"`",
"description": "Only applies if `with_panel` is `true`. Unique id of panel."
},
{
"name": "icon_classes",
"type": "Boolean",
"default": "`\"\"`",
"description": "Classes that must always be applied to icons."
},
{
"name": "wrapper_arguments",
"type": "Hash",
"default": "`{}`",
"description": "[System arguments](/system-arguments) to be used in the `- ` wrapper when the tab is an item in a list."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "OpenProject::BorderGrid",
"status": "open_project",
"a11y_reviewed": false,
"short_name": "OpenProjectBorderGrid",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/border_grid.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/border_grid/default/",
"parameters": [
{
"name": "spacious",
"type": "Boolean",
"default": "`false`",
"description": "Whether to add margin to the bottom of the component."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "OpenProject::BorderGrid::Cell",
"status": "open_project",
"a11y_reviewed": false,
"short_name": "OpenProjectBorderGridCell",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/border_grid/cell.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/border_grid/cell/default/",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "OpenProject::DragHandle",
"status": "open_project",
"a11y_reviewed": false,
"short_name": "OpenProjectDragHandle",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/drag_handle.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/drag_handle/default/",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "OpenProject::FlexLayout",
"status": "open_project",
"a11y_reviewed": false,
"short_name": "OpenProjectFlexLayout",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/flex_layout.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/flex_layout/default/",
"parameters": [
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "OpenProject::GridLayout",
"status": "open_project",
"a11y_reviewed": false,
"short_name": "OpenProjectGridLayout",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/grid_layout.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/grid_layout/default/",
"parameters": [
{
"name": "css_class",
"type": "String",
"default": "N/A",
"description": "The basic css class applied on the grid-container"
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "OpenProject::GridLayout::Area",
"status": "open_project",
"a11y_reviewed": false,
"short_name": "OpenProjectGridLayoutArea",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/grid_layout/area.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/grid_layout/area/default/",
"parameters": [
{
"name": "css_class",
"type": "String",
"default": "N/A",
"description": "The basic css class applied on the grid-container"
},
{
"name": "area_name",
"type": "Symbol",
"default": "N/A",
"description": "The specific area name, used for creating the element class and the \"grid-area\" style"
},
{
"name": "component",
"type": "ViewComponent::Base",
"default": "`Primer::BaseComponent`",
"description": "The instance of the component to be rendered."
},
{
"name": "tag",
"type": "Symbol",
"default": "`:div`",
"description": "One of `:div` or `:span`."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "OpenProject::PageHeader",
"status": "open_project",
"a11y_reviewed": false,
"short_name": "OpenProjectPageHeader",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/default/",
"parameters": [
]
},
{
"component": "Tooltip",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "Tooltip",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/tooltip.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/tooltip/default/",
"parameters": [
{
"name": "label",
"type": "String",
"default": "N/A",
"description": "the text to appear in the tooltip"
},
{
"name": "direction",
"type": "String",
"default": "`:n`",
"description": "Direction of the tooltip. One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
},
{
"name": "align",
"type": "String",
"default": "`:default`",
"description": "Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. One of `:default`, `:left_1`, `:left_2`, `:right_1`, or `:right_2`."
},
{
"name": "multiline",
"type": "Boolean",
"default": "`false`",
"description": "Use this when you have long content"
},
{
"name": "no_delay",
"type": "Boolean",
"default": "`false`",
"description": "By default the tooltips have a slight delay before appearing. Set true to override this"
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
},
{
"component": "Truncate",
"status": "deprecated",
"a11y_reviewed": false,
"short_name": "Truncate",
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb",
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/truncate/default/",
"parameters": [
{
"name": "tag",
"type": "Symbol",
"default": "`:div`",
"description": "One of `:div`, `:p`, `:span`, or `:strong`."
},
{
"name": "inline",
"type": "Boolean",
"default": "`false`",
"description": "Whether the element is inline (or inline-block)."
},
{
"name": "expandable",
"type": "Boolean",
"default": "`false`",
"description": "Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`."
},
{
"name": "max_width",
"type": "Integer",
"default": "`nil`",
"description": "Sets the max-width of the text."
},
{
"name": "system_arguments",
"type": "Hash",
"default": "N/A",
"description": "[System arguments](/system-arguments)"
}
]
}
]