How to edit array Add-button text 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

Unfortunately, there's no built-in schema option to directly customize the "Add item" button text in array fields. The standard array field configuration doesn't provide properties like buttonTitle or similar for changing this text through schema alone.

However, you can customize it by creating a custom input component. This is the recommended approach when you need to modify the array's add button or other UI elements.

Custom Input Component Solution

You'll need to create a custom input component that wraps the default array input. The key is using the renderDefault function to preserve all the standard array functionality while customizing just the add button:

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

function CustomArrayInput(props: ArrayOfObjectsInputProps) {
  const { renderDefault, onItemAppend, schemaType } = props
  
  const handleAdd = () => {
    const newItem = {
      _type: schemaType.of[0].name,
      _key: `${Date.now()}` // Generate unique key
    }
    onItemAppend(newItem)
  }
  
  return (
    <Stack space={3}>
      <Button
        icon={AddIcon}
        mode="ghost"
        onClick={handleAdd}
        text="Add new category" // Your custom text here
      />
      {renderDefault(props)}
    </Stack>
  )
}

Then apply it in your schema:

defineField({
  name: 'categories',
  title: 'Categories',
  type: 'array',
  of: [{ type: 'category' }],
  components: {
    input: CustomArrayInput
  }
})

Important Clarification

You might see references to insertMenu.groups in array configuration - this is not for customizing the add button text. The insertMenu.groups feature is specifically for organizing different types into named groups when your array accepts multiple types in the of array. It helps categorize what types of items can be added, but doesn't change the button text itself.

Benefits of This Approach

  • Keeps all default array functionality (drag-and-drop, item rendering, validation)
  • Full control over button appearance and behavior
  • Can add multiple custom buttons or other UI elements
  • Maintains accessibility and collaboration features

For more detailed examples of customizing array inputs, check out the Form Components API documentation and guides on creating custom input components, which provide similar patterns for array customization.

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.

Was this answer helpful?