See Sanity in action πŸ‘€ Join us for a live product demo + Q&A β†’

Document Badges API

Reference documentation for the document badges.

A document badge is a small UI component that indicates the status of a document. It currently appears in the Studio next to the toolbar actions. The default set of document badges currently shows draft and published status.

Introduction to using document badges β†’

Learn how to use document badges when building custom workflows β†’

Document badge properties

These are the properties returned to a badge component.

  • idstring

    An id for the current document (e.g. the id of the published document)

  • typestring

    The schema type of the current document.

  • draftSanityDocument

    Returns the draft document (a document with unpublished changes) if any. Returns null if there is no draft document.

  • publishedSanityDocument

    The version of the document that is currently published, if available. Returns null if the document isn't published.

Document badge description

These are the properties a badge description object must follow.

  • titlestring

    Title of the badge. This will be displayed when hovering the badge.

  • labelstring

    The label that the badge will display.

  • colorstring

    The color for the badge. Can be one of the following values: primary, warning, success, danger

  • iconReact.ComponentType

    A react component to use as icon for the badge

Example

export function HelloWorldBadge(props) {
  return {
    label: 'Hello world',
		title: 'Hello I am a custom document badge',
    color: "success"
  }
} 

See a complete example of implementing custom badges β†’

Was this article helpful?