--- - component: BorderBoxHeader source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/border_box/header.rb parameters: - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: ButtonMarketing source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/button_marketing.rb parameters: - name: scheme type: Symbol default: "`:default`" description: One of `:default`, `:outline`, `:primary`, or `:transparent`. - name: variant type: Symbol default: "`:default`" description: One of `:default` and `:large`. - name: tag type: Symbol default: "`:button`" description: One of `:a` and `:button`. - name: type type: Symbol default: "`:button`" description: One of `:button` and `:submit`. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Layout source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/layout.rb parameters: - name: stacking_breakpoint type: Symbol default: "`:md`" description: When the `Layout` should change from rows into columns. One of `:lg`, `:md`, or `:sm`. - name: first_in_source type: Symbol default: "`:sidebar`" description: Which element to render first in the HTML. This will change the keyboard navigation order. One of `:main` and `:sidebar`. - name: gutter type: Symbol default: "`:default`" description: The amount of space between the main section and the sidebar. One of `:condensed`, `:default`, `:none`, or `:spacious`. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: TabNav source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_nav.rb parameters: - name: tag type: Symbol default: "`:nav`" description: One of `:div` and `:nav`. - name: label type: String default: N/A description: Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements. - name: body_arguments type: Hash default: "`{}`" description: "[System arguments](/system-arguments) for the body wrapper." - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: TabPanels source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_panels.rb parameters: - name: label type: String default: N/A description: Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs. - name: align type: Symbol default: N/A description: One of `:left` and `:right`. - Defaults to left - name: body_arguments type: Hash default: "`{}`" description: "[System arguments](/system-arguments) for the body wrapper." - name: wrapper_arguments type: Hash default: "`{}`" description: "[System arguments](/system-arguments) for the `TabContainer` wrapper." - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Tooltip source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tooltip.rb parameters: - name: for_id type: String default: N/A description: The ID of the element that the tooltip should be attached to. - name: type type: Symbol default: N/A description: One of `:description` and `:label`. - name: direction type: Symbol default: "`:s`" description: One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`. - name: text type: String default: N/A description: The text content of the tooltip. This should be brief and no longer than a sentence. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: UnderlineNav source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_nav.rb parameters: - name: tag type: Symbol default: "`:nav`" description: One of `:div` and `:nav`. - name: label type: String default: N/A description: Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements. - name: align type: Symbol default: "`:left`" description: One of `:left` and `:right`. - Defaults to left - name: body_arguments type: Hash default: "`{}`" description: "[System arguments](/system-arguments) for the body wrapper." - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: UnderlinePanels source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_panels.rb parameters: - name: label type: String default: N/A description: Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs. - name: align type: Symbol default: "`:left`" description: One of `:left` and `:right`. - Defaults to left - name: body_arguments type: Hash default: "`{}`" description: "[System arguments](/system-arguments) for the body wrapper." - name: wrapper_arguments type: Hash default: "`{}`" description: "[System arguments](/system-arguments) for the `TabContainer` wrapper." - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: BaseButton source: https://github.com/primer/view_components/tree/main/app/components/primer/base_button.rb parameters: - 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: block type: Boolean default: "`false`" description: 'Whether button is full-width with `display: block`.' - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: AutoComplete source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete.rb parameters: - name: label_text type: String default: N/A description: The label of the input. - name: src type: String default: N/A description: The route to query. - name: input_id type: String default: N/A description: Id of the input element. - name: input_name type: String default: "`nil`" description: Optional name of the input element, defaults to `input_id` when not set. - name: list_id type: String default: N/A description: Id of the list element. - name: visually_hide_label type: Boolean default: "`false`" description: Controls if the label is visible. If `true`, screen reader only text will be added. - name: show_clear_button type: Boolean default: "`false`" description: Adds optional clear button. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - name: size type: Hash default: "`:medium`" description: Input size can be small, medium (default), or large - name: full_width type: Boolean default: "`false`" description: Input can be full-width or fit to content - name: disabled type: Boolean default: "`false`" description: Disabled input - name: invalid type: Boolean default: "`false`" description: Invalid input - name: placeholder type: String default: "`nil`" description: The placeholder text displayed within the input - name: inset type: Boolean default: "`false`" description: subtle input background color - name: monospace type: Boolean default: "`false`" description: monospace input font family - component: AutoCompleteItem source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb parameters: - name: value type: String default: N/A description: Value of the item. - name: selected type: Boolean default: "`false`" description: Whether the item is selected. - name: disabled type: Boolean default: "`false`" description: Whether the item is disabled. - name: description_variant type: Hash default: "`:block`" description: Changes the description style. Allowed values are :inline, :block - name: description type: String default: N/A description: Display description text below label - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Avatar source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar.rb parameters: - name: src type: String default: N/A description: The source url of the avatar image. - name: alt type: String default: N/A description: Passed through to alt on img tag. - name: size type: Integer default: "`20`" description: One of `16`, `20`, `24`, `32`, `40`, `48`, or `80`. - name: shape type: Symbol default: "`:circle`" description: Shape of the avatar. One of `:circle` and `:square`. - name: href type: String default: "`nil`" description: The URL to link to. If used, component will be wrapped by an `` tag. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: AvatarStack source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar_stack.rb parameters: - name: tag type: Symbol default: "`:div`" description: One of `:div` and `:span`. - name: align type: Symbol default: "`:left`" description: One of `:left` and `:right`. - name: tooltipped type: Boolean default: "`false`" description: Whether to add a tooltip to the stack or not. - name: body_arguments type: Hash default: "`{}`" description: Parameters to add to the Body. If `tooltipped` is set, has the same arguments as [Tooltip](/components/tooltip). The default tag is `:div` but can be changed using `tag:` to one of `:div` and `:span`. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Blankslate source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/blankslate.rb parameters: - name: narrow type: Boolean default: "`false`" description: Adds a maximum width of `485px` to the Blankslate. - name: spacious type: Boolean default: "`false`" description: Increases the padding from `32px` to `80px 40px`. - name: border type: Boolean default: "`false`" description: Adds a border around the Blankslate. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Breadcrumbs source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/breadcrumbs.rb parameters: - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Flash source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb parameters: - name: full type: Boolean default: "`false`" description: Whether the component should take up the full width of the screen. - name: spacious type: Boolean default: "`false`" description: Whether to add margin to the bottom of the component. - name: dismissible type: Boolean default: "`false`" description: Whether the component can be dismissed with an X button. - name: icon type: Symbol default: "`nil`" description: Name of Octicon icon to use. - name: scheme type: Symbol default: "`:default`" description: One of `:danger`, `:default`, `:success`, or `:warning`. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Text source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb parameters: - name: tag type: Symbol default: "`:span`" description: '' - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Truncate source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/truncate.rb parameters: - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: BorderBox source: https://github.com/primer/view_components/tree/main/app/components/primer/border_box_component.rb parameters: - name: padding type: Symbol default: "`:default`" description: One of `:condensed`, `:default`, or `:spacious`. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Box source: https://github.com/primer/view_components/tree/main/app/components/primer/box_component.rb parameters: - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Button source: https://github.com/primer/view_components/tree/main/app/components/primer/button_component.rb 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` and `:small`. - name: size type: Symbol default: "`:medium`" description: One of `:medium` and `: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: ButtonGroup source: https://github.com/primer/view_components/tree/main/app/components/primer/button_group.rb parameters: - name: variant type: Symbol default: "`nil`" description: DEPRECATED. One of `:medium` and `:small`. - name: size type: Symbol default: "`:medium`" description: One of `:medium` and `:small`. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: ClipboardCopy source: https://github.com/primer/view_components/tree/main/app/components/primer/clipboard_copy.rb parameters: - name: aria-label type: String default: N/A description: String that will be read to screenreaders when the component is focused - name: value type: String default: "`nil`" description: Text to copy into the users clipboard when they click the component. - name: for type: String default: N/A description: Element id from where to get the copied value. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: CloseButton source: https://github.com/primer/view_components/tree/main/app/components/primer/close_button.rb parameters: - name: type type: Symbol default: "`:button`" description: One of `:button` and `:submit`. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Counter source: https://github.com/primer/view_components/tree/main/app/components/primer/counter_component.rb parameters: - name: count type: Integer, Float::INFINITY, nil default: "`0`" description: 'The number to be displayed (e.x. # of issues, pull requests)' - name: scheme type: Symbol default: "`:default`" description: Color scheme. One of `:default`, `:primary`, or `:secondary`. - name: limit type: Integer, nil default: "`5_000`" description: Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+") - name: hide_if_zero type: Boolean default: "`false`" description: If true, a `hidden` attribute is added to the counter if `count` is zero. - name: text type: String default: '`""`' description: Text to display instead of count. - name: round type: Boolean default: "`false`" description: Whether to apply our standard rounding logic to value. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Details source: https://github.com/primer/view_components/tree/main/app/components/primer/details_component.rb parameters: - name: overlay type: Symbol default: "`:none`" description: Dictates the type of overlay to render with. One of `:dark`, `:default`, or `:none`. - name: reset type: Boolean default: "`false`" description: Defaults to false. If set to true, it will remove the default caret and remove style from the summary element - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Dropdown source: https://github.com/primer/view_components/tree/main/app/components/primer/dropdown.rb parameters: - name: overlay type: Symbol default: "`:default`" description: One of `:dark`, `:default`, or `:none`. - name: with_caret type: Boolean default: "`false`" description: Whether or not a caret should be rendered in the button. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: DropdownMenu source: https://github.com/primer/view_components/tree/main/app/components/primer/dropdown_menu_component.rb parameters: - name: direction type: Symbol default: "`:se`" description: One of `:e`, `:ne`, `:s`, `:se`, `:sw`, or `:w`. - name: scheme type: Symbol default: "`:default`" description: Pass `:dark` for dark mode theming - name: header type: String default: "`nil`" description: Optional string to display as the header - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Flex source: https://github.com/primer/view_components/tree/main/app/components/primer/flex_component.rb parameters: - name: justify_content type: Symbol default: "`JUSTIFY_CONTENT_DEFAULT`" description: Use this param to distribute space between and around flex items along the main axis of the container. One of `nil`, `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. - name: inline type: Boolean default: "`false`" description: Defaults to false. - name: flex_wrap type: Boolean default: "`FLEX_WRAP_DEFAULT`" description: Defaults to nil. - name: align_items type: Symbol default: "`ALIGN_ITEMS_DEFAULT`" description: Use this param to align items on the cross axis. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. - name: direction type: Symbol default: "`nil`" description: Use this param to define the orientation of the main axis (row or column). By default, flex items will display in a row. One of `nil`, `:column`, `:column_reverse`, `:row`, or `:row_reverse`. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: FlexItem source: https://github.com/primer/view_components/tree/main/app/components/primer/flex_item_component.rb parameters: - name: flex_auto type: Boolean default: "`false`" description: Fills available space and auto-sizes based on the content. Defaults to false - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Heading source: https://github.com/primer/view_components/tree/main/app/components/primer/heading_component.rb parameters: - name: tag type: String default: N/A description: One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: HellipButton source: https://github.com/primer/view_components/tree/main/app/components/primer/hellip_button.rb parameters: - name: inline type: Boolean default: "`false`" description: Whether or not the button is inline. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: HiddenTextExpander source: https://github.com/primer/view_components/tree/main/app/components/primer/hidden_text_expander.rb parameters: - name: inline type: Boolean default: "`false`" description: Whether or not the expander is inline. - name: button_arguments type: Hash default: "`{}`" description: "[System arguments](/system-arguments) for the button element." - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: IconButton source: https://github.com/primer/view_components/tree/main/app/components/primer/icon_button.rb parameters: - name: scheme type: Symbol default: "`:default`" description: One of `:danger` and `: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: box type: Boolean default: "`false`" description: Whether the button is in a [BorderBox](/components/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: Image source: https://github.com/primer/view_components/tree/main/app/components/primer/image.rb parameters: - name: src type: String default: N/A description: The source url of the image. - name: alt type: String default: N/A description: Specifies an alternate text for the image. - name: lazy type: Boolean default: "`false`" description: Whether or not to lazily load the image. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: ImageCrop source: https://github.com/primer/view_components/tree/main/app/components/primer/image_crop.rb parameters: - name: src type: String default: N/A description: The path of the image to crop. - name: rounded type: Boolean default: "`true`" description: If the crop mask should be a circle. Defaults to true. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Label source: https://github.com/primer/view_components/tree/main/app/components/primer/label_component.rb 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: variant type: Symbol default: "`nil`" description: One of `nil`, `:inline`, or `:large`. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Layout source: https://github.com/primer/view_components/tree/main/app/components/primer/layout_component.rb 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` and `: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: Link source: https://github.com/primer/view_components/tree/main/app/components/primer/link_component.rb parameters: - name: tag type: String default: "`:a`" description: One of `:a` and `:span`. - name: href type: String default: "`nil`" description: URL to be used for the Link. Required if tag is `:a`. 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: "`true`" description: Whether or not to underline the link. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: LocalTime source: https://github.com/primer/view_components/tree/main/app/components/primer/local_time.rb parameters: - name: datetime type: DateTime default: N/A description: The date to parse - name: initial_text type: String default: "`nil`" description: Text to render before component is initialized - name: weekday type: Symbol default: "`:short`" description: One of `:long` and `:short`. - name: year type: Symbol default: "`:numeric`" description: One of `:2-digit` and `:numeric`. - name: month type: Symbol default: "`:short`" description: One of `:long` and `:short`. - name: day type: Symbol default: "`:numeric`" description: One of `:2-digit` and `:numeric`. - name: hour type: Symbol default: "`:numeric`" description: One of `:2-digit` and `:numeric`. - name: minute type: Symbol default: "`:numeric`" description: One of `:2-digit` and `:numeric`. - name: second type: Symbol default: "`:numeric`" description: One of `:2-digit` and `:numeric`. - name: time_zone_name type: Symbol default: "`:short`" description: One of `:long` and `:short`. - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: Markdown source: https://github.com/primer/view_components/tree/main/app/components/primer/markdown.rb 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: Menu source: https://github.com/primer/view_components/tree/main/app/components/primer/menu_component.rb parameters: - name: system_arguments type: Hash default: N/A description: "[System arguments](/system-arguments)" - component: NavigationTab source: https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb parameters: - name: list type: Boolean default: "`false`" description: Whether the Tab is an item in a `