Modifying the "Add item" button in Sanity's array field using the parts system

2 replies
Last updated: Dec 14, 2021
Is there anyway to rename the “Add item” button used by the array field?
Dec 13, 2021, 11:29 PM
OK, thanks for letting me know
user M
It would cool if it was available to override in the options.
Dec 14, 2021, 11:45 AM
Haven’t really done this since native conditional fields were released, but you used to be able to overwrite the default fields via the parts system.
You basically add sth. like

    "implements": "part:@sanity/form-builder/input/array/functions",
    "path": "./utils/conditionalFields/"
. (Modify “path” accordingly to point to your custom implementation).
Here’s a rough sample from a while back, where I modified the button to read “Choose” instead of “Add” when there was a certain validation method on the native array field:

// Simple implementation of <>

import React from "react";
import DropDownButton from "part:@sanity/components/buttons/dropdown";
import Button from "part:@sanity/components/buttons/default";
import ButtonGrid from "part:@sanity/components/buttons/button-grid";

export default class ArrayFunctions extends React.Component {
  handleDropDownAction = (menuItem) =&gt; {
  handleAddBtnClick = () =&gt; {
  handleInsertItem = (type) =&gt; {
    const { onCreateValue, onAppendItem } = this.props;
    const item = onCreateValue(type);
  renderSelectType(isList) {
    const items = =&gt; ({
      title: memberDef.title ||,
      type: memberDef,
    return (
        {isList ? "Add" : "Choose"}
  render() {
    const { type, readOnly, children, value } = this.props;

    const maxLength =
      type.validation[0]._rules.find((rule) =&gt; rule.flag === "max") || false;

    const isList = maxLength &amp;&amp; maxLength.constraint === 1 ? false : true;

    if (maxLength &amp;&amp; value &amp;&amp; value.length &gt;= maxLength.constraint) {
      return null;

    if (readOnly) {
      return null;

    if (type?.options?.generated) {
      return null;

    return (
        &lt;ButtonGrid align="start"&gt;
          {type.of.length === 1 ? (
            &lt;Button inverted onClick={this.handleAddBtnClick}&gt;
          ) : (

          {children || null}
Haven’t tested this with a newer studio installation, so I can’t vouch that this will work with the new Sanity UI. But maybe it will put you on the right track
Dec 14, 2021, 1:47 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?