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

# Using data tags

> Use data tags to control which data sources are accessed in each environment

export const Alert = ({type, title, children}) => {
  const getIcon = () => {
    switch (type) {
      case 'info':
        return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm0 15c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm1-3H9V6h2v6z' fill='%230099FF'/%3E%3C/svg%3E";
      case 'success':
        return "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm4.293 6.293L9 11.586 5.707 8.293c-.391-.391-1.024-.391-1.414 0s-.391 1.024 0 1.414l4 4c.391.391 1.024.391 1.414 0l6-6c.391-.391.391-1.024 0-1.414s-1.024-.391-1.414 0z' fill='%230CC26D'/%3E%3C/svg%3E";
      case 'warning':
        return "data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxMDgwJyBoZWlnaHQ9JzEwODAnPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3RyYW5zcGFyZW50Jy8+PHBhdGggZD0nTTEzLjc5NCAxMC43NSA4LjMgMS4yNWExLjUgMS41IDAgMCAwLTIuNiAwbC01LjQ5NCA5LjVBMS40OTQgMS40OTQgMCAwIDAgMS41IDEzaDExYTEuNDkzIDEuNDkzIDAgMCAwIDEuMjk0LTIuMjVNNi41IDUuNWEuNS41IDAgMCAxIDEgMFY4YS41LjUgMCAwIDEtMSAwek03IDExYS43NS43NSAwIDEgMSAwLTEuNS43NS43NSAwIDAgMSAwIDEuNScgc3R5bGU9J3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7ZmlsbDojZmY5ZjM1O2ZpbGwtcnVsZTpub256ZXJvO29wYWNpdHk6MScgdHJhbnNmb3JtPSd0cmFuc2xhdGUoLjAyIDE5LjMwNSlzY2FsZSg3Ny4xNCknLz48L3N2Zz4=";
      case 'danger':
        return "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm5.707 4.293L10 9.586 4.293 4.293c-.391-.391-1.024-.391-1.414 0s-.391 1.024 0 1.414L8.586 11l-5.707 5.293c-.391.391-.391 1.024 0 1.414s1.024.391 1.414 0L10 12.414l5.707 5.293c.391.391 1.024.391 1.414 0s.391-1.024 0-1.414L11.414 11l5.707-5.293c.391-.391.391-1.024 0-1.414s-1.024-.391-1.414 0z' fill='%23F45252'/%3E%3C/svg%3E";
      case 'note':
        return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm0 15c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm1-3H9V6h2v6z' fill='%230099FF'/%3E%3C/svg%3E";
      default:
        return "";
    }
  };
  return <div className={`alert alert--${type}`}>
      <div className="alert-icon" style={{
    backgroundImage: `url("${getIcon()}")`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '20px',
    width: '24px',
    height: '24px',
    position: 'absolute',
    left: '16px',
    top: '16px'
  }} />
      <div className="alert-content">
        {title && <div className="alert-title">{title}</div>}
        <div className="alert-body">{children}</div>
      </div>
    </div>;
};

Data tags in Superblocks let you define named configurations — like **Production**, **Staging**, or **us-east** — and use them to control which data sources your apps connect to in each environment.

* Use non-production data tags in Edit mode so developers (and Clark) can safely build and test without touching production data.
* Assign production data tags to the Production environment to keep production data isolated.
* Add multiple data tags to an environment (e.g., `us-east`, `us-west`, `eu-west`) to let users switch between regions in deployed apps.

<Alert type="info">
  To create new data tags or configure which environments they're allowed in, see the <a href="/admin/environments">Manage environments & data tags</a> admin guide.
</Alert>

## Set up data tags for an application

Each environment (Edit, Preview, Production) in your app can have one or more data tags assigned. The available data tags are restricted by the admin — only data tags that the admin has allowed for a given environment will appear as options.

To configure data tags for your app:

1. Open the **Settings** icon on the lower left corner of any App
2. Click **Environments**

<img src="https://mintcdn.com/superblocks/9luYYaGEgXp4pGR_/images/administration/environments/in-app-env-switcher.png?fit=max&auto=format&n=9luYYaGEgXp4pGR_&q=85&s=65b12ba9fc0dffb2c5707eeab1983472" alt="Settings menu" width="420" height="274" data-path="images/administration/environments/in-app-env-switcher.png" />

3. For each environment, select the data tags you want to use from the allowed options
4. Choose a default data tag for each environment

<img src="https://mintcdn.com/superblocks/9luYYaGEgXp4pGR_/images/administration/environments/in-app-env-menu.png?fit=max&auto=format&n=9luYYaGEgXp4pGR_&q=85&s=bb6c444637dd099eef1e47f7a0637d6b" alt="App environment setup" width="1024" height="816" data-path="images/administration/environments/in-app-env-menu.png" />

<Alert type="info">
  <p>
    Only data tags that the admin has assigned to a given environment will be available for selection. For example, if a data tag is only allowed in Production, it won't appear as an option in Edit or Preview.
  </p>
</Alert>

## Change the default data tag

When multiple data tags are available in an environment, you can set a default. This is the data tag used to execute APIs in this environment by default.

To change the default, select the radio button next to the data tag you want to use by default:

<img src="https://mintcdn.com/superblocks/9luYYaGEgXp4pGR_/images/administration/environments/set-default.png?fit=max&auto=format&n=9luYYaGEgXp4pGR_&q=85&s=20dcfc07f45edf8e77ffe22b25a039f5" alt="Default data tag selection" width="538" height="204" data-path="images/administration/environments/set-default.png" />