OpenProject Lookbook
Pages
Collapse all
How To Use
Components
Danger Dialog
Feedback Dialog And Feedback Message
Hover Cards
Page Header
Page Heading
Status Button
Sub Header
Tables
Work Package Info Line
Patterns
Layout
Forms
Autocompleters
Dialogs
Menu And Navigation
Flash Banner
Flash Modal
Colors
Settings Pages
Deprecated
Modals
Styles
Icons
Deprecated
Typography
Op Icons
Colors
Spacings
Shadows
Focus
No matching results.
Previews
Collapse all
Open Project
Common
Attribute
Autocomplete
Decorated
Work Package
Project
Project With Search Icon
Color
Datepicker
Single
Range
Divider
Default
With Dynamic Margins
Duration
Default
System Arguments
Iso8601
Plain Text
Loading Indicator
Relative Time
Default
German Locale
Rich Text
Submenu
Default
Playground
Deprecated
Advanced Filters
Attribute Group
Badges
Default
Secondary
Border Only
Buttons
Default
Highlight
Alternative Highlight
Danger
Active
Transparent
Sizes
Link Like
Collapsible Section
Context Menu
Contextual Info Text
Danger Zone
Forms
Default
Bordered
Bordered Compressed
Collapsible
Controls
Field Types
Field Widths
Multiple Fields Per Row
Sections And Fieldsets
Vertical Layout
Wide Labels
Links
Modal
Default
Danger Zone
News
Default
Detailed View
On-Off status
Default
Off
Pagination
Progress Bar
Scrollable Tabs
Default
No Ellipse
Footer
No Content
Simple Filters
Default
With Radio Buttons
Table
Default
No Ellipse
Footer
No Content
Toast
Info
Warning
Error
Success
Upload
Toolbar
Default
With Form Elements
With Labelled Form Elements
Tooltip
Default
Forms
Widget boxes
Enterprise Edition
Banner
Default
Manual Overwrite
Filter
Filter Button
Default
With toggable filter section
Filters
Op Turbo
Frame
Stream
Primer
Border Box Table
Default
Custom Column Widths
With Action Menu
Copy To Clipboard
Default
As Link
Expandable List
Default
Primer
Flash
Default
Success
Danger
Unique Key
Button
Form
Status Button
Playground
With Icon
With Description
Progress
Modal
Work Based
Status Based
Projects
Life Cycle Type
Gate
Stage
Queries
Sort By
Shares
Share Dialog
Project Query
Work Package
Users
Avatar
Default
Sizes
Work Packages
Info Line
Reminder
Modal Body
New
Edit
Split View
Status Badge
Status Button
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
Listbox
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
Link as button 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
With Header Filter
Dropdown
Playground
Default
Menu
Direction
Options
FormControl
Playground
Default
Options
HellipButton
Default Options
Playground
HiddenTextExpander
Playground
Default options
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 A Sticky Container
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
SelectPanel
Playground
Default
Local fetch
Eventually local fetch
Remote fetch
Custom loading label
Custom loading description
Local fetch (no results)
Eventually local fetch (no results)
Remote fetch (no results)
Single select
Multiselect
Dynamic Label
Footer buttons
With avatar items
With Icons
With subtitle
Remote fetch initial failure
Remote fetch filter failure
Eventually local fetch initial failure
Single-select form
Remote fetch form
Multi-select form
List of links
No values
Scroll container
Stack
Default
Playground
StackItem
Default
Playground
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
With Turbo
With Autofocus
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
With Icons and Counters
With Actions
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
No 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
WithBetaTruncate
WithDeprecatedTruncate
With a specific link target
Button
Playground
Default
Primary
Danger
Invisible
Invisible all visuals
Link
All schemes
Full width
Label wrap
Link as button
Summary as button
Trailing visual
Leading visual
Leading visual SVG
Trailing action
Trailing Counter
With tooltip
Inactive
Link scheme with long label
Small scheme with one character
ButtonGroup
Playground
Default options
Split button
With menu button
Icon buttons
Button group with multiple 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
Open
Flash
Playground
Default
Color Schemes
More Options
Heading
Playground
Default options
IconButton
Playground
Default
Invisible
Primary
Danger
Link as button
Summary as button
Label
Playground
Default Options
Color Schemes
Sizes
Inline
Link
Playground
Default Options
With Tooltip
Color Scheme
With leading icon
With trailing icon
Markdown
Playground
Default Options
NavList
Playground
Default
Top-level items
Show more item
Trailing action
Long label truncate overflow
Long Label Wrap
Long Label Show Tooltip No Truncate Label
Group Long Label With Tooltip
Octicon
Playground
Default Options
Popover
Playground
Default
Large
Directions
ProgressBar
Playground
Default
Sizes
RelativeTime
Playground
Default
Micro Format
Recent Time
Count Down Timer
No Title Attribute
Link With Tooltip
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
Custom Width Fields 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
Open Project
BorderGrid
Playground
Default Options
Spacious
DangerDialog
Default
With confirmation check box
Playground
With form using FormBuilder
With form
With additional details
With custom icon
DragHandle
Default
Playground
FeedbackDialog
Default
Playground
With additional details
With custom icon
With custom footer
With loading spinner
FeedbackMessage
Default
Playground
With custom icon
With custom color
With loading spinner
With secondary action
FlexLayout
Playground
Default
Row layout
Column layout
Nested layout
GridLayout
Playground
Default
Heading
Playground
Default options
InputGroup
Default
Playground
With icon button
With a small input
With a caption
Page Header
Default
Playground
Large title
Editable title
With actions
With a menu inside the actions
With a dialog inside the actions
With a ZenModeButton inside the actions
With a create action
With a single action
With leading action (on wide)
With non-bold breadcrumbs
With tab nav
With a SegmentedControl
With mobile icons-only SegmentedControl
SidePanel
Playground
Default
With custom component
With action menu
SubHeader
Playground
Default
With ActionMenu
With Dialog
With ButtonGroup
With custom filter button
With a custom area below
With Text in the middle
ZenModeButton
Default
Playground
No matching results.
OP Icon Font
Previous page
Next page
OpenProject icon font
For use outside primer pages, use these icon fonts
accessibility
accountable
activity-history
add-attachment
add-link
add
align-center
align-justify
align-left
align-right
arrow-down1
arrow-down2
arrow-in
arrow-left-right
arrow-left1
arrow-left2
arrow-left3
arrow-left4
arrow-out
arrow-right2
arrow-right3
arrow-right4
arrow-right5
arrow-right6
arrow-right7
arrow-thin-left
arrow-thin
arrow-up1
arrow-up2
assigned-to-me
assigned
attachment
attention
back-up
backlogs
baseline-add
baseline-delete
baseline
bcf
bell
billing-information
blocked
boards
bold
bookmark-filled
bookmark
budget
bug
calendar
calendar2
camera
cancel-circle
cancel
cart
changeset-down
changeset-up
changeset
chart1
chart2
chart3
checkmark-circle
checkmark
clipboard
close
code-tag
color-text
color-underline
column-left
column-right
columns
comments
compare2
concept
configure-knobs
console-light
console
contacts
copy-documents
copy
cost-reports
cost-types
cursor
custom-development
custom-fields
cut
date-alerts
delete-folder
delete
delta-triangle
dependency
design
double-arrow-left
double-arrow-right
download-arrow
download
drag-handle
dropdown-open
dropdown
duplicate
edit
email-alert
enterprise-addons
enterprise-badge
enterprise
enumerations
error
export-atom
export-bcf
export-csv
export-pdf-1
export-pdf-descr
export-pdf-with-descriptions
export-pdf
export-xls-descr
export-xls-with-descriptions
export-xls-with-relations
export-xls
export
external-link
faq
file-doc
file-form
file-presentation
file-sheet
file-storage-connection
file-text
filter
flag
folder-add
folder-locked
folder-open
folder-remove
folder
forums
from-fullscreen
getting-started
github_logo
gitlab_logo
glossar
google-plus
group-by
group
hamburger
headline1
headline2
headline3
headset
help
help1
help2
hide
hierarchy
home
hosting
iconfont-scaler
ifc
image1
image2
import
inbox
info1
info2
input-disabled
installation-services
italic
key
like-hand
link
loading1
loading2
location
locked
logout
mail1
mail2
maintenance-support
mark-all-read
mark-read
meetings
mention-comment
mention
menu
merge-branch
microphone
milestone
minus1
minus2
mobile
modules
more
move
movie
music
new-planning-element
news
nextcloud-circle
nextcloud
no-hierarchy
no-zen-mode
not-supported
not-watching
notes
openid
openproject
ordered-list
outline
paragraph-left
paragraph-right
paragraph
payment-history
phone
pin
play
plugins
plus
pre
presentation
preview
print
priority
project-types
projects
publish
pulldown-up
pulldown
quote
quote2
redo
relation-follows
relation-new-child
relation-precedes
relations
reload
reminder
remove-1
remove-link
remove
rename
reported-by-me
resizer-bottom-right
resizer-vertical-lines
return-to-previous
roadmap
rss
rubber
save
search
select-all
send-mail
server-key
settings-display
settings
settings2
settings3
settings4
share
shortcuts
show-all-projects
show-more-horizontal
show-more
slack
snooze
sort-ascending
sort-by
sort-descending
sort-down
sort-up
square
star-empty
star-filled
star
status-reporting
status
stop
strike-through
sum-error
sum-sign
team-planner
text
ticket-checked
ticket-down
ticket-edit
ticket-minus
ticket-note
ticket
time-tracking-running
time-tracking-start
time-tracking-stop
time
to-fullscreen
today-arrows
training-consulting
two-factor-authentication
two-factor-authentification
types
underline
undo
unit
unlocked
unordered-list
unwatched
up-down-stepper
upload-arrow
upload
user-minus
user-missing
user-plus
user
view-card
view-fullscreen
view-list
view-model
view-split-viewer-table
view-split
view-split2
view-timeline
warning
watched
watching
wiki-edit
wiki
wiki2
work-packages
workflow
yes
zen-mode
zoom-auto
zoom-in
zoom-out