Utility Constants

Leveraging Utility Constants for UI Components

Our User Interface components come with the added advantage of utility constants. These constants simplify the process of assigning valid values to component properties, reduce the possibility of errors and enriching the developer experience.

The constants follow a naming pattern: [COMPONENT-NAME].[PROPERTY_NAME].[PROPERTY_VALUE]. For instance, you can assign a variant to a button like so: variant=DHL_BUTTON.VARIANT.OUTLINE.

To incorporate these constants into your application, you need to import them. Regardless of your chosen framework, you can use the following syntax (using DHL_BUTTON as an example):

import * as DUIL_CONSTANTS from "@dhl-official/stencil-library";

const { DHL_BUTTON } = DUIL_CONSTANTS;

Alternatively, you can use this simpler syntax:

import { DHL_BUTTON } from "@dhl-official/stencil-library";

You can find the available constants and their values in the specific property documentation section for each component. Alternatively, you can discover them by importing the constant for the component you need and leveraging your IDE's autocomplete feature. This way, you can easily explore and utilize the full range of constants available for each component.