Primer ViewComponents v0.21.1
Previews
Collapse all
Primer
Alpha
ActionBar
Default
Inline with other components
Playground
Sizes
ActionList
Playground
Default
Leading visuals
With manual dividers
Divider
Heading
Item [playground]
Avatar item [playground]
Item [default]
Item [size large]
Item [size xlarge]
Item [leading visual]
Item [trailing visual]
Item [leading and trailing visual]
Item [description]
Item [inline description]
Item [trailing action]
Item [danger]
Item [disabled]
Item [wrap label]
Item [truncate label]
Item [active]
Long label
Long Label Wrap
Long Label Truncate No Tooltip
Long Label Show Tooltip With Truncate Label
ActionMenu
Playground
Content labels
Default
With groups
With items and groups
Wide
With icon button
Single select
Multiple select
Links
Single item selected
Single Select with Internal Label
Multiple items selected
With deferred content
With deferred preloaded content
With actions
Single select form
Single select form items
Multiple select form
With disabled items
Opens a dialog
In Scoll container
Align end
[Item] Block description
[Item] Submitting Forms
[Item] Inline description
[Item] Leading visual
[Item] Leading visual single select
Two menus
AutoComplete
Playground
Default Options
More Examples
Banner
Playground
Default
Schemes
Dismissable
Full Width
With action button
With action content
ButtonMarketing
Playground
Default options
Size Variants
Schemes
CheckBox
Playground
Default
Options
CheckBoxGroup
Playground
Default
Invalid
Options
Dialog
Playground
Default options
Long text
With Header
With Footer
With a Form
Custom Header
Nested dialog
Dialog with text input
Dialog with AutoComplete text input
Page with scrollbar and dialog
Autofocus element with autofocus attribute
Left Side
Right Side
Scroll container
Dialog inside Overlay
Initially Open
Dropdown
Playground
Default
Menu
Direction
Options
FormControl
Playground
Default
Options
HellipButton
Default Options
Playground
HiddenTextExpander
Playground
Default options
ImageCrop
Playground
Default Options
Custom loading slot
Layout
Playground
Default
Gutter
Main Width
Sidebar Width
Sidebar Column Placement
Sidebar Row Placement
Stacking Breakpoint
Menu
Playground
Default
MultiInput
Playground
Default
With caption
Visually hidden label
Disabled
OcticonSymbols
Playground
Default
Overlay
Playground
Default
Menu No Header
Middle Of Page
Middle Of Page with relative container
In an ActionMenu
Dialog with header and footer
RadioButton
Playground
Default
Options
RadioButtonGroup
Playground
Default
Invalid
Options
SegmentedControl
Playground
Default
Full Width
Icons And Text
Trailing Label
Icons Only
With Link As Tag
With Aria Labeled Headings
Select
Playground
Default
Options
TabNav
Playground
Default
With icons and counters
With Extra
TabPanels
Playground
Default options
With Extra
TextArea
Playground
Default
Options
TextField
Playground
Default
Sizes
Options
Auto Check
With data target attribute
Input group with leading button
Input group with trailing button
Input group with ActionMenu
Toggle Switch
Playground
Default
Checked
Disabled
Checked Disabled
Small
With Status Label Position End
With A Bad Src
With No Src
With Csrf Token
With Bad Csrf Token
Tooltip
Playground
Default
Description Tooltip On Button With Existing Describedby
With Right Most Position
With Multiple On A Page
Tooltip Enabled Elements
Tooltip inside Primer::Alpha::Overlay
Tooltip with button moving focus to input
Direction: North
Direction: South
Direction: East
Direction: West
Direction: Southeast
Direction: Southwest
Direction: Northeast
Direction: Northwest
UnderlineNav
Playground
Default options
With icons and counters
UnderlinePanels
Playground
Default options
Beta
AutoComplete
Playground
Default
With submit button
Leading visual
Trailing action
Full width
Visually hide label
Sizes
Leading visual in results
Trailing visual in results
AutoCompleteItem
Playground
Default
WithDescription
Avatar
Playground
Default
As link
Sizes
Shape
AvatarStack
Playground
Default
Multiple Avatars
More Options
BaseButton
Playground
Default options
Disabled
Blankslate
Playground
Default options
Options
With Icon
With Image
Loading
Description
Primary Action
Secondary Action
Full
Inside Flex Container
BorderBox
Playground
Default
Header with title
Row colors
Padding
Breadcrumbs
Playground
Default options
Button
Playground
Default
Primary
Danger
Invisible
Invisible all visuals
Link
All schemes
Full width
Link as button
Trailing visual
Leading visual
Leading visual SVG
Trailing action
Trailing Counter
With tooltip
Inactive
ButtonGroup
Playground
Default options
Split button
With menu button
Icon buttons
Button group with all tags
With clipboard copy button
ClipboardCopy
Playground
Default Options
With text instead of icons
Copying from an element
ClipboardCopyButton
Playground
Playground
With tooltip
CloseButton
Playground
Default options
Counter
Playground
Default Options
With Text
Color Schemes
Rounded Number
Details
Playground
Default options
Custom button
Without button
Flash
Playground
Default
Color Schemes
More Options
Heading
Playground
Default options
IconButton
Playground
Default
Invisible
Primary
Danger
Label
Playground
Default Options
Color Schemes
Sizes
Inline
Link
Playground
Default Options
With Tooltip
Color Scheme
Markdown
Playground
Default Options
NavList
Playground
Default
Top-level items
Show more item
Trailing action
Long label truncate overflow
Long Label Wrap
Long Label Truncate No Tooltip
Long Label Show Tooltip No Truncate Label
Octicon
Playground
Default Options
Popover
Playground
Default
Large
Directions
ProgressBar
Playground
Default
Sizes
RelativeTime
Playground
Default
Micro Format
Recent Time
Count Down Timer
Spinner
Playground
Default Options
State
Playground
Default
States
Sizes
Subhead
Playground
Default Options
Danger
Actions
Spacing
Header Size
Text
Playground
Default options
TimelineItem
Playground
Default
Truncate
Playground
Default options
Multiple items
Advanced multiple items
Max widths
Box
Playground
Default
Border
Border Bottom
Forms
Single Text Field Form
Multi Text Field Form
Text Field And Checkbox Form
Horizontal Form
Composed Form
Submit Button Form
Radio Button Group Form
Check Box Group Form
Array Check Box Group Form
Select Form
Action Menu Form
Radio Button With Nested Form
Check Box With Nested Form
Caption Template Form
After Content Form
Invalid Form
Multi Input Form
Name With Question Mark Form
Immediate Validation Form
Example Toggle Switch Form
Auto Complete Form
No matching results.
Pages
Collapse all
Forms
Introduction
Getting Started
Caption Templates
After Content
Groups and Layouts
Miscellaneous Inputs
Toggle Switch Forms
Validations
Compound Forms
Inputs
Check Box
Check Box Group
Form Button
Multi Input
Radio Button
Radio Button Group
Select
Submit Button
Text Area
Text Field
System Arguments
No matching results.
Preview not found
It may have been moved or deleted.