🚧 Under Construction
This component documentation is currently being developed. Some features may be incomplete.
hTWOo Components
Browse all 208 hTWOo UI Framework components. Fluent Design components for SharePoint, Microsoft Teams, and web applications.
Explore 208 Fluent Design components for SharePoint, Microsoft Teams, and web applications.
Atoms
95 components
Molecules
66 components
Organism
25 components
Templates
3 components
Pages
3 components
Design-tokens
16 components
All Components A-Z
A
- Accordion Content molecules / accordion
- Accordion Group organism / accordion
- Accordion Header molecules / accordion
- Accordion Item molecules / accordion
- Action Button atoms / buttons
- Add and slide design-tokens / motion
- All Buttons - disabled atoms / buttons
- All Tooltips atoms / tooltip
- Avatar atoms / avatar
- Avatar with Presence molecules / avatar-with-presence
B
- Basic Tooltip atoms / tooltip
- Blockquote or Pullquote atoms / typography
- Blues design-tokens / colors
- Bottombar Dialog organism / dialogs
- Breadcrumb Navigation molecules / menus
- Breadcrumb with Buttons molecules / menus
- Button Colors design-tokens / colors
- Button Colors Primary design-tokens / colors
- Button Tag List molecules / meta
C
- Card Footer molecules / cards-elements
- Card HTML molecules / cards-elements
- Card Image molecules / cards-elements
- Card Location molecules / cards-elements
- Card Title molecules / cards-elements
- Checkbox atoms / input
- Checkbox Group molecules / forms
- Checkbox Group - Horizontal molecules / forms
- Checkbox Group /w Columns molecules / forms
- Collapsible Table atoms / table
- Color Input atoms / input
- Command Bar molecules / menus
- Command Bar Overflow molecules / menus
- Command Button atoms / buttons
- Command Button with Link atoms / buttons
- Compact Table atoms / table
- Compact Table with Column Groups atoms / table
- Compound Primary atoms / buttons
- Compound Standard atoms / buttons
- Context atoms / buttons
- Custom Select Dropdown atoms / input
D
- Date and Time Input atoms / input
- Date Input atoms / input
- Default Table atoms / table
- Delete and Slide design-tokens / motion
- Dialog Content molecules / dialogs
- Dialog Header molecules / dialogs
- Dialog IFrame Component molecules / dialogs
- Document Card organism / cards
- Document Card Click organism / cards
- Document Card HTML organism / cards
- Document Card Shimmer organism / cards
E
- Elevations design-tokens / elevations
- Email Input atoms / input
- Error Message atoms / validation
F
- Facepile organism / facepiles
- Fieldset molecules / forms
- File Input atoms / input
- Flyout menu style atoms / buttons
- Font sizes atoms / typography
- Form Field molecules / forms
- Form Flow Step 1 - Raising Issue organism / form-sample
- Form Flow Step 2 - Reviewing Issue organism / form-sample
- Form Flow Step 3 - Solution organism / form-sample
- Form Flow Step 4 - Final Solution organism / form-sample
- Form Label atoms / input
G
- Generic Dialog organism / dialogs
- greens design-tokens / colors
- Grouped Select Dropdown atoms / input
H
- Headlines atoms / typography
- HTML5 Video Player molecules / media
- Hyperlink Primary atoms / buttons
- Hyperlink Standard atoms / buttons
I
- Icon Button atoms / buttons
- Icon Button Split atoms / buttons
- Icon Button with menu atoms / buttons
- Icon for Overflow Button atoms / buttons
- Icon Tool design-tokens
- IFrame Dialog organism / dialogs
- Inline text styles atoms / typography
- Input Description atoms / input
- Input Readonly Showcase atoms / input
- Input with Prefix and Suffix atoms / input
- Invalid Text Input atoms / input
L
- Legend atoms / input
- Link Tag List molecules / meta
- Liquid UI Grid System atoms / grid
- Loading Components atoms / loading
M
- magenta design-tokens / colors
- Message Bars organism / dialogs
- Monospaced atoms / typography
- Month Input atoms / input
N
- Neutral Colors design-tokens / colors
- Number Input atoms / input
O
- oranges design-tokens / colors
P
- Paragraph atoms / typography
- Password Input atoms / input
- Person Select Dropdown atoms / input
- Persona molecules / persona
- Persona Overflow molecules / persona
- Phone Input atoms / input
- Pivot Bar molecules / menus
- Pivot Bar Overflow molecules / menus
- Pivot Button atoms / buttons
- PnP Search Grid - 12 Columns organism / pnp-search-grid
- Presence atoms / avatar
- Presence all atoms / avatar
- Primary atoms / buttons
- Primary Button Tag List molecules / meta
- Primary Link Tag List molecules / meta
- Primary Split Button atoms / buttons
- Primary Static Tag List molecules / meta
- Primary w/ icon - Left atoms / buttons
- Primary w/ icon - Right atoms / buttons
- Progress Bar / Indicator atoms / output
- Progress Step atoms / output
- Progress Step Bar atoms / output
- purples design-tokens / colors
Q
- Quick Link Button - Fill Center molecules / quick-links
- Quick Link Button - Fill Center One Line molecules / quick-links
- Quick Link Button - Fill One Line molecules / quick-links
- Quick Link Button - No Outline Center molecules / quick-links
- Quick Link Button - No Outline Center One Line molecules / quick-links
- Quick Link Button - No Outline One Line molecules / quick-links
- Quick Link Button - Outline molecules / quick-links
- Quick Link Button - Outline Center molecules / quick-links
- Quick Link Button - Outline Center One Line molecules / quick-links
- Quick Link Button - Outline One Line molecules / quick-links
- Quick Link Compact Item molecules / quick-links
- Quick Link List Grid molecules / quick-links
- Quick Link List Item molecules / quick-links
- Quick Link Tiles molecules / quick-links
- Quick Link Tiles - Fill molecules / quick-links
- Quick Link Tiles - Large molecules / quick-links
- Quick Link Tiles - Medium molecules / quick-links
- Quick Link Tiles - XLarge molecules / quick-links
- Quick Links Button Filled Grid organism / quick-links-grid
- Quick Links Button No Outline Grid organism / quick-links-grid
- Quick Links Button Outline Grid organism / quick-links-grid
- Quick Links Compact Grid organism / quick-links-grid
- Quick Links Grid organism / quick-links-grid
- Quick Links Icons atoms / icons
- Quick Links Icons - SVG atoms / icons
- Quick Links List Grid organism / quick-links-grid
- Quick Links Tiles Grid organism / quick-links-grid
R
- Radio Button atoms / input
- Radio Button disabled atoms / input
- Radio Button Group molecules / forms
- Radio Button Group - Horizontal molecules / forms
- Radio Button Group /w Columns molecules / forms
- reds design-tokens / colors
S
- Search Box atoms / input
- Select atoms / input
- Select Grouped atoms / input
- Shimmer Circle atoms / loading
- Shimmer Image atoms / loading
- Shimmer Row atoms / loading
- Shimmer Squared atoms / loading
- Shimmer Theming Support atoms / loading
- Showcase molecules / avatar-with-presence
- Sidebar Dialog organism / dialogs
- Spinner atoms / loading
- Splash Card Description molecules / cards-elements
- Splash Card Footer molecules / cards-elements
- Splash Card Header molecules / cards-elements
- Splash Card Title molecules / cards-elements
- Standard atoms / buttons
- Standard Icon atoms / icons
- Standard Split atoms / buttons
- Standard w/ icon - Left atoms / buttons
- Standard w/ icon - Right atoms / buttons
- Static Tag List molecules / meta
- Sticky Table atoms / table
- Stream Video Player molecules / media
- Success Label atoms / validation
T
- Tag (Button) atoms / meta
- Tag (Link) atoms / meta
- Tag (Static) atoms / meta
- Tag Primary (Button) atoms / meta
- Tag Primary (Link) atoms / meta
- Tag Primary (Static) atoms / meta
- teals design-tokens / colors
- Teams Dashboard Page pages / teams
- Teams Dashboard Template templates / teams
- Teams Splash Card organism / cards
- Teams Splash Screen Multi Page pages / teams
- Teams Splash Screen Multi Template templates / teams
- Teams Splash Screen Page pages / teams
- Teams Splash Screen Template templates / teams
- Teams Toolbar molecules / menus
- Text Input atoms / input
- Text Input with Prefix atoms / input
- Text Input with Suffix atoms / input
- Textarea Input atoms / input
- Theme Color design-tokens / colors
- Time Input atoms / input
- Toggle Switch atoms / input
- Tooltip with Form Element atoms / tooltip
- Topbar Dialog organism / dialogs
U
- URL Input atoms / input
V
- Validation Message atoms / input
- Vertical Navigation molecules / menus
- Video Overlay molecules / media
- Video Thumbnail molecules / media
- Vimeo Video Player molecules / media
W
- Webpart Title molecules / webpart-related
- Week Input atoms / input
Y
- yellow design-tokens / colors
- YouTube Video Player molecules / media