Back to Designs page

Table of Contents

Related Research

No research entries have been linked to this design.

Resources

Badges

Andrew Ronaldson avatar

Author: Andrew Ronaldson | Last edit: March 27, 2023 | Design type: Badges | Product area: OpenShift

Resource badges

  • Colored badges are added to the left of all Kubernetes resources (including Custom Resources) in the console
  • Badges help users quickly identify resource type with a 1-3 letter abbreviation
  • There are custom resource definitions that exceed 3 letter abbreviations but we try to avoid this for general pre-defined resources
  • Resource names are typically shown as links (There are some exceptions to this rule if there is no detail page to display but majority of the time there is a link).
  • Full descriptive resource type name is shown on delayed hover of badge

resource badge


Table of resource badges

Dev variables can be seen here.

Resource badgeVariable color
custom resourceCustom resource$color-pf-blue-300;
AlertmanagerAlertmanager$pf-color-orange-600;
ConfigMapConfigMap$pf-color-purple-600;
NodeNode$pf-color-purple-400;
PodPod$pf-color-cyan-300;
NamespaceNamespace$pf-color-green-600;
IngressIngress$pf-color-purple-700;
RBAC bindingRBAC binding$pf-color-light-blue-500;
ServiceService$pf-color-light-green-500;
RBAC roleRBAC role$pf-color-gold-600;
SecretSecret$pf-color-orange-400;
Pod overloadPod overlord$pf-color-blue-500;
ProjectProject$pf-color-green-600;
PipelinesPipelines$pf-color-green-400;
EventingEventing$pf-color-red-300;
ServingServing$pf-color-cyan-400;

Status badges

A status badge is a Patternfly badge that includes both a status icon and status label which can be used on a details view title or on another resource in the details view. Having a status badge in the details view title allows the user to see the status of the resource in context, regardless of which tab is selected. Having a status badge for another resource allows for quick insight into the status of a related resource to the one that is being viewed. To view status badges in the OpenShift Sketch Library visit the symbols page here.

Example of a status badge in a resource’s title:

 

Resource title badge

Example of a status badge in another resource’s details:

 

Resource details badge

Examples of some status badges that appear in OpenShift:

 

status badges


Tech preview badge

A tech preview badge indicates when a feature is new and may still be in-progress on the development side. This can be Dev or Tech preview, and the same color is utilized for both. Tech preview badges should appear to the right of the label. To view the tech preview badge in the OpenShift Sketch Library visit the symbols page here.

Example of tech preview badge on feature

 

tech preview badges