---
title: "NFPA Diamond Custom Widget"
slug: "npfa-diamond-custom-widget"
updated: 2023-10-26T15:28:29Z
published: 2023-10-26T15:28:29Z
canonical: "support.tulip.co/npfa-diamond-custom-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.tulip.co/llms.txt
> Use this file to discover all available pages before exploring further.

# NFPA Diamond Custom Widget

*Streamline material safety information and context with easy to use NFPA Diamond Widget*

## Purpose

1. The NFPA diamond provides context about material safety in a standard way. For more information on the NFPA diamond, reference the NFPA website as well as their [*reference guide*](https://www.nfpa.org/assets/files/aboutthecodes/704/704_faqs.pdf)

Below is a basic example of the NFPA diamond. ![nfpa_1.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/nfpa_1.png)

- Blue: Health Hazard
- Red: Fire Hazard
- Yellow: Instability
- White: Special hazards

Blue, Red, and Yellow contain a number from 0 to 4; 0 refers to low risk; 4 is high risk

The White diamond can clarify if the material has a reaction or could be an asphyxiant.

## Setup

After adding the custom widget to an app, you can update the colors, values, and formatting for the NFPA diamond with either static values or variable / table records. ![nfpa_screenshot.png](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/nfpa_screenshot.png)

## How it works

You can use the custom widget to streamline creating NFPA diamonds for a variety of materials; these can be dynamically updated with table records

## References

- [*Additional NFPA References*](https://www.bradyid.com/resources/nfpa704-diamond-labeling-guide#:~:text=The%20NFPA%20704%20diamond%20system,dangerous%20situation%20involving%20hazardous%20chemicals.)