Components

Dynatrace UI Components

Al
Alert
Angular component
The alert component informs users about necessary configuration actions or failures.
Ba
Bar indicator
Angular component
Bar-indicators are used to compare values with each other.
Br
Breadcrumbs
Angular component
Breadcrumbs are a navigational aid that help the user understand on what page they are and what path led them there.
Bu
Button
Angular component
The button component is used for navigating and triggering actions.
Bg
Button group
Angular component
The button group component is used to switch between different views.
Cd
Card
Angular component
Ch
Chart
Angular component
The chart component visualizes series of data to easily analyze and compare metrics.
Cb
Checkbox
Angular component
The checkbox component is used to toggle one or multiple options from a set.
Co
Confirmation dialog
Angular component
The confirmation dialog appears to confirm setting changes via save or cancel button.
Co
Consumption
Angular component
The consumption component visualizes service usage data combining an icon, a title, a progress bar and some description text.
Cd
Context dialog
Angular component
The context dialog is an overlay which appears on click of a button.
Co
Copy to clipboard
Angular component
The copy to clipboard component is used to let the user copy links, code snippets and more.
Ca
CTA card
Angular component
The CTA card is a specific type of card, showing a call to action content.
Dr
Drawer
Angular component
The drawer is a component that adds collapsible side content to some primary content.
Es
Empty state
Angular component
The empty state is used if a component or entity view has no data to show.
Ex
Expandable panel
Angular component
The expandable panel component is responsible for showing and hiding context information.
Ex
Expandable section
Angular component
The expandable section is used to show and hide context information.
Ex
Expandable text
Angular component
The expandable text component provides expand and collapse functionality for inline-text.
Fi
Filter field
Angular component
The filter is used to narrow down displayed content.
Ff
Form field
Angular component
The form field component can be used to wrap input components to provide a label, errors or hints.
Fm
Formatters
Angular component
Formatters are pipes and util functions that can be used to format values within templates and TypeScript files.
Hi
Highlight
Angular component
The highlight component is used to highlight characters in a string.
In
Indicator
Angular component
The dtIndicator directive can be used with any component to indicate a warning or an error.
Ig
Info group
Angular component
An info group visualizes properties by combining an icon and a short text.
Ie
Inline editor
Angular component
The inline editor is used to make text editable.
If
Input fields
Angular component
An input field allows to enter various types of data.
Ke
Key-value list
Angular component
The key-value list component is used to visualize properties.
Lo
Loading distractor
Angular component
The loading distractor indicates a saving or loading action.
Me
Menu
Angular component
A menu provides a list of links which can be grouped according to categories.
Mi
Micro chart
Angular component
The micro chart component is a smaller version of a chart where the amount of displayed information is reduced.
Ov
Overlay
Angular component
Overlays are floating labels that are meant to clarify, display additional context information, or help you to use specific content.
Pa
Pagination
Angular component
A pagination is used to split long lists or tables in smaller sets.
Pr
Progress bar
Angular component
The progress bar component is used to visualize progress.
Pr
Progress circle
Angular component
The progress circle component is used to visualize progress.
Ra
Radio button
Angular component
The radio button component is used to select one option from a set.
Se
Secondary nav
Angular component
The secondary nav component is a navigation menu that can contain internal and external links.
Se
Select
Angular component
The select component allows to select a value from a set of options.
Sa
Selection area
Angular component
The selection area creates a selected area inside an origin element.
Sh
Show more
Angular component
The show more component creates a show more pagination widget.
St
Stepper
Angular component
The stepper component is to guide through multiple steps. The steps are indicated by the progress indicator on the top. There should be at least 3 steps.
Sw
Switch
Angular component
The switch component is used to toggle an option.
Tl
Table
Angular component
A table is a two-dimensional structure composed of rows and columns displaying a set of comparable data.
Tb
Tabs
Angular component
Tabs are used to switch between different views.
Ta
Tag
Angular component
Ti
Tile
Angular component
A tile is a clickable area and represents e.g. entities.
Tc
Timeline chart
Angular component
The timeline chart enables a quick duration analysis of a user action.
To
Toast
Angular component
Toasts display status messages or feedback that is directly related to an action.
To
Toggle button group
Angular component
To
Top Bar Navigation
Angular component
A navigation bar for first level navigation commonly placed on the top area of a page.
Tt
Tree-table
Angular component
The tree-table is used to show a tree of entities with additional data in a grid/table, hence with table headers.