Get help on Discord

Changing the "Add Item" button text in Sanity.io using a custom inputComponent.

6 replies
Last updated: Oct 11, 2022
Hi everyone, hope you doing great! Nice that there's place like this. I have an easy question is it possible to change "Add Item" to something like "Add new category" or any other custom text. Thank you for your help!
AI Update

I understand you want to customize the "Add Item" button text in Sanity Studio! Unfortunately, there isn't a simple built-in configuration option like buttonText to change this text directly in the array field schema. However, you can achieve this by creating a custom input component.

Here's a practical approach using Sanity's Form Components API. The key is to create a custom input component that wraps the default array input:

// CustomCategoryArrayInput.tsx
import { ArrayOfObjectsInputProps } from 'sanity'
import { Stack, Button } from '@sanity/ui'
import { AddIcon } from '@sanity/icons'

export function CustomCategoryArrayInput(props: ArrayOfObjectsInputProps) {
  return (
    <Stack space={3}>
      {/* Render the default array input with all its functionality */}
      {props.renderDefault({
        ...props,
        arrayFunctions: {
          ...props.arrayFunctions,
          // Override the add button rendering
        }
      })}
    </Stack>
  )
}

Then apply it to your array field in your schema:

import { defineField, defineType } from 'sanity'
import { CustomCategoryArrayInput } from './CustomCategoryArrayInput'

export default defineType({
  name: 'myDocument',
  type: 'document',
  fields: [
    defineField({
      name: 'categories',
      title: 'Categories',
      type: 'array',
      of: [{ type: 'category' }],
      components: {
        input: CustomCategoryArrayInput
      }
    })
  ]
})

The challenge: The default array input doesn't expose a simple prop to change just the button text. You'd need to either:

  1. Use CSS to hide the default button and add your own custom button (less elegant but simpler)
  2. Build a more complete custom array input that reimplements the array functionality with your custom labels (more work but full control)

For the CSS approach, you could target the button with custom CSS in your Studio styles, though this is fragile and not officially recommended.

The custom input components guide and the guide on creating array inputs with selectable templates show more complete examples of customizing array inputs, though they focus on adding template buttons rather than changing the default button text.

This is a commonly requested feature, and hopefully Sanity will add a simpler configuration option in the future. For now, custom components are the official way to achieve this level of customization in Sanity Studio.

Im still fairly new to Sanity and I dont think this is the right or best solution, but you could give the field a custom 
inputComponent
ok,I see. So "Add Item" is kind of default standard right which should stay like this and better not to change it? where and which article should I read about inputComponent?
I don't know, maybe there actually is some options you can add to change that text. If that exists, no doubt that would be a nicer option and a lot less work than a custom 
inputComponent
.but:
https://www.sanity.io/docs/custom-input-widgets
#sanityTeamPleaseAddThisFeature
Thank you!
I’ve used an 
inputComponent
before that does just this! You can then use the 
options
field in the array schema type to define the button name:
{
    name: "categories",
    title: "Categories",
    type: "array",
    of: [{ type: "category" }],
    options: { buttonTitle: "Add new category" },
},
First, in 
sanity.json
, replace the default array part with your custom component:
"parts": [
    {
        "implements": "part:@sanity/form-builder/input/array/functions",
        "path": "./parts/customArrayButton.js"
    },
    ... // other parts
]
Then here’s the custom component:

import React from "react";
import { isReferenceSchemaType } from "@sanity/types";
import { AddIcon } from "@sanity/icons";
import { Button, Grid, Menu, MenuButton, MenuItem } from "@sanity/ui";
import { useId } from "@reach/auto-id";

const customArrayButton = React.forwardRef((props, ref) => {
	const { type, readOnly, children, onCreateValue, onAppendItem, value } = props;
	const menuButtonId = useId();
	const insertItem = React.useCallback(
		(itemType) => {
			const item = onCreateValue(itemType);
			onAppendItem(item);
		},
		[onCreateValue, onAppendItem]
	);
	const handleAddBtnClick = React.useCallback(() => {
		insertItem(type.of[0]);
	}, [type, insertItem]);
	if (readOnly) {
		return null;
	}

	return (
		<Grid
			gap={1}
			style={{ gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))" }}
			ref={ref}
		>
			{type.of.length === 1 ? (
				<Button
					icon={AddIcon}
					mode="ghost"
					onClick={handleAddBtnClick}
					text={type.options?.buttonTitle || "Add item"}
				/>
			) : (
				<MenuButton
					button={
						<Button
							icon={AddIcon}
							mode="ghost"
							text={type.options?.buttonTitle || "Add item…"}
						/>
					}
					id={menuButtonId || ""}
					menu={
						<Menu>
							{type.of.map((memberDef, i) => {
								const referenceIcon =
									isReferenceSchemaType(memberDef) &&
									(<http://memberDef.to|memberDef.to> || []).length === 1 &&
									<http://memberDef.to[0].icon;|memberDef.to[0].icon;>
								const icon =
									memberDef.icon || memberDef.type?.icon || referenceIcon;
								return (
									<MenuItem
										key={i}
										text={memberDef.title || memberDef.type?.name}
										onClick={() => insertItem(memberDef)}
										icon={icon}
									/>
								);
							})}
						</Menu>
					}
				/>
			)}
			{children}
		</Grid>
	);
});

export default customArrayButton;

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?