Get help on Discord

How to edit the "Add" button text for arrays in Sanity Studio?

4 replies
Last updated: Nov 30, 2025
Is there any way to edit the text in studio for the Add-button in an array?
AI Update

Yes, you can customize the "Add item" button text in Sanity Studio arrays by creating a custom input component! Here's how:

Using a Custom Array Input Component

You can override the default "+ Add item" button by creating a custom input component and using the arrayFunctions prop. The key is to set arrayFunctions: () => null when calling renderDefault, which removes the default button, then add your own custom button with whatever text you want.

Here's a complete example:

import React, { useCallback } from 'react';
import { AddIcon } from '@sanity/icons';
import { Button, Stack } from '@sanity/ui';
import { randomKey } from '@sanity/util/content';
import { insert } from 'sanity';

const CustomArrayInput = (props) => {
  const { onChange } = props;

  const handleClick = useCallback(
    async (event) => {
      const item = {
        _key: randomKey(12),
        _type: 'yourItemType', // Set to your array item type
      };

      // Patch the document
      onChange(insert([item], 'after', [-1])); // or 'before', [0] for top
    },
    [onChange],
  );

  return (
    <Stack space={3}>
      <Button
        icon={AddIcon}
        text="Your Custom Text Here" // ← Change this!
        mode="ghost"
        onClick={handleClick}
      />
      {props.renderDefault({ ...props, arrayFunctions: () => null })}
    </Stack>
  );
};

export default CustomArrayInput;

Then use it in your schema:

import { defineField, defineType } from 'sanity';
import CustomArrayInput from './CustomArrayInput';

export default defineType({
  name: 'myDocument',
  type: 'document',
  fields: [
    defineField({
      name: 'myArray',
      type: 'array',
      of: [{ type: 'reference', to: [{ type: 'myType' }] }],
      components: { input: CustomArrayInput }, // ← Apply the custom component
    }),
  ],
});

How It Works

The custom component does three things:

  1. Removes the default button by passing arrayFunctions: () => null to renderDefault
  2. Adds your custom button with whatever text, icon, or styling you want
  3. Handles the add action using the onChange prop with the insert patch operation

You can customize the button text, icon, styling, and even the behavior (like adding items to the top with insert([item], 'before', [0]) instead of the bottom).

Check out this recipe on customizing array add buttons for a working example. For more on custom input components in general, see the Form Components API documentation.

Show original thread
4 replies

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?