UI HTML Elements
Supported HTML Tags
Any tag not listed below will be treated as a div tag.
| Category | Tag | Attribute | Layout | Notes and links |
|---|---|---|---|---|
| Container | ||||
| dialog | N/A | Modal Dialog | ||
| div | Block | Container element | ||
| footer | Block | Footer containing pill buttons | ||
| form | Block | Form (containing elements) | ||
| Text | ||||
| b | Block | Bold text | ||
| p | Block | Paragraph (equivalent to div) |
||
| h1 | Block | Style differences within dialog form |
||
| h2 | Block | " | ||
| h3 | Block | " | ||
| h4 | Block | " | ||
| h5 | Block | " | ||
| h6 | Block | " | ||
| p | Block | Paragraph (equivalent to div) |
||
| span | Block | Text element | ||
| Images | ||||
| img | Block | Display image | ||
| elements | ||||
| button | uxp-variant="cta" |
Block | Pill Button (Call To Action) | |
| button | uxp-variant="primary" |
Block | Pill Button (Primary) | |
| button | uxp-variant="secondary" |
Block | Pull Button (Secondary) | |
| button | uxp-variant="warning" |
Block | Pull Button (Warning) | |
| button | uxp-variant="action" |
Block | Action Button | |
| button | uxp-selected="true" |
Block | Selected Action Button | |
| button | uxp-quiet="true" |
Block | Quiet variation (except call to action) | |
| input] | type="checkbox" | Block | Checkbox | |
| input] | type="image" | Block | Image Button | |
| input] | type="number" | Block | Text field | |
| input] | type="range" | Block | Slider | |
| input] | type="text" | Block | Text field | |
| input] | type="text" uxp-quiet="true" |
Block | Quiet text field | |
| select | Block | Dropdown | ||
| option | N/A | Dropdown options | ||
| textarea | Block | Standard text area | ||
| textarea | uxp-quiet="true" |
Block | Quiet text area | |
| Menus | ||||
| menu | N/A | Context menu | ||
| menuitem | N/A | Context menu items |
