Get help on Discord

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

4 replies
Last updated: Dec 7, 2020
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
Hey there! 🙂 As far as I've found from digging around in the form-builder a bit it looks like it's hard coded at the moment.
Will check some more to see if there are ways to customise it via the schema or something.

What's the use case? Localisation maybe?
🙂
It’s mostly about making it more intuitive for the editors what they can add
I see! That makes a lot of sense 🙂
I did some asking around and I'm sorry to say that this is something we don't support at the moment. But we are looking to improve this kind of customization going forward
🙂 Thanks for asking!
user L
This is a total hack, and it doesn't actually get rid of the word Add, but you could provide additional text to the button with this:
Add a style override to your sanity.json file so it contains something like:


"parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./schemas/schema"
    },
    {
      "implements": "part:@sanity/base/theme/variables/override-style",
      "path": "./sanityOverrides.css"
    }
  ]
Then, in 
sanityOverrides.css
, you could do something like:

:global([class^="ArrayInput"] [class^="DefaultButton_text"])::after {
  content: ' item';
}
It's ugly, but it does let you add to the button text (
::before
to prepend "Add"). Not battle tested. I'm sure there's a method using JavaScript that is not only cleaner, but lets you remove the word Add.

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?