How to edit the "Add" button text for arrays in Sanity Studio?
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:
- Removes the default button by passing
arrayFunctions: () => nulltorenderDefault - Adds your custom button with whatever text, icon, or styling you want
- Handles the add action using the
onChangeprop with theinsertpatch 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 thread4 replies
Was this answer helpful?
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.
