---
title: "Chip block"
description: "An inline label chip with icons and a visually hidden title option."
requested_language: hu
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/hu/next/payload/blocks/chip
version: unreleased (main)
docs_index: https://docs.systhema.app/hu/next/llms.txt
---
> This page isn't translated yet. Showing English.


The Chip block is a small inline label with optional icons.

![The chip block fields in the Payload editor](./images/chip.light.webp)

## Where it is offered

Offered in every tier: `root`, `region`, `fragment` and `slot`, as an inline block that sits inside a line of text.

## Fields

<!-- generated:block-fields chip -->

| Field          | Type           | Label                    | Default                                                                                                                                                                 | Notes                                                                                                                                                                      |
| -------------- | -------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `_tier`        | `select`       |                          |                                                                                                                                                                         | Options: `root` (Root), `region` (Region), `fragment` (Fragment), `slot` (Slot), `stack` (Stack)                                                                           |
| `alignSelf`    | `radio`        | Align Self               | `center`                                                                                                                                                                | Shown when `siblingData?._tier==="stack"`; Required; Shown when `siblingData?.setSelfAlign`; Options: `start` (Start), `center` (Center), `end` (End), `stretch` (Stretch) |
| `flex1`        | `checkbox`     | Flex 1                   | `false`                                                                                                                                                                 | Shown when `siblingData?._tier==="stack"`                                                                                                                                  |
| `grow`         | `checkbox`     | Grow                     | `false`                                                                                                                                                                 | Shown when `siblingData?._tier==="stack"`                                                                                                                                  |
| `hideTitle`    | `checkbox`     | Hide title visually      | `false`                                                                                                                                                                 | Shown when `Boolean(siblingData?.title)`                                                                                                                                   |
| `iconAfter`    | `text`         | Icon after the title     | `async()=>{const raw=typeof defaultValue==="function"?defaultValue():defaultValue;if(!raw\|\|typeof raw!=="string")return void 0;return resolveDefaultIdentifier(raw)}` |                                                                                                                                                                            |
| `iconBefore`   | `text`         | Icon before the title    | `async()=>{const raw=typeof defaultValue==="function"?defaultValue():defaultValue;if(!raw\|\|typeof raw!=="string")return void 0;return resolveDefaultIdentifier(raw)}` |                                                                                                                                                                            |
| `linkType`     | `radio`        | Link Type                | `none`                                                                                                                                                                  | Required; Options: `none` (None), `custom` (Custom URL), `internal` (Internal Link)                                                                                        |
| `message`      | `ui`           |                          |                                                                                                                                                                         | Shown when `siblingData?._tier==="stack"`                                                                                                                                  |
| `newTab`       | `checkbox`     | Open in new tab          | `false`                                                                                                                                                                 | Shown when the custom field-helper condition passes                                                                                                                        |
| `reference`    | `relationship` | Choose a page to link to |                                                                                                                                                                         | Required; Shown when the custom field-helper condition passes; Related to `pages`                                                                                          |
| `setSelfAlign` | `checkbox`     | Define Self Alignment    | `false`                                                                                                                                                                 | Shown when `siblingData?._tier==="stack"`                                                                                                                                  |
| `shrink`       | `checkbox`     | Shrink                   | `false`                                                                                                                                                                 | Shown when `siblingData?._tier==="stack"`                                                                                                                                  |
| `title`        | `text`         | Chip title               |                                                                                                                                                                         |                                                                                                                                                                            |
| `url`          | `text`         | Enter a URL              | ``                                                                                                                                                                      | Required; Shown when the custom field-helper condition passes                                                                                                              |

<!-- /generated -->

Default icons for new chips come from the `chip` plugin option; see [`button` and `chip` defaults](https://docs.systhema.app/hu/next/payload/editor/icons.md#button-and-chip-defaults).

**Hide title visually** (Advanced Settings) keeps the title for screen readers while hiding it visually, so an icon-only chip still has an accessible name.

## Rendered output

Renders the [Chip component](https://docs.systhema.app/hu/next/components/chip.md).

## Converter

`chipConverter` renders `<Chip.a>` for custom or internal links and plain `<Chip>` otherwise. It resolves icons with `resolveIconHtml`, keeps visually hidden titles accessible, and appends a new-tab cue to linked chips.

## Customizing

Import `ChipBlock` from `@systhemaui/payload/blocks` as the starting schema for a project block. Register the definition and your renderer through `customBlocks`, using `type: 'inline'` and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing `chip` slug takes precedence over the built-in converter. Keep the fields that renderer reads, including populated relationships and nested editor states.

See [Registering blocks](https://docs.systhema.app/hu/next/payload/blocks.md#registering-blocks) for the configuration pattern and [Converters](https://docs.systhema.app/hu/next/payload/custom-blocks/converters.md) for the renderer contract. A project converter used in client-mode live preview also needs [browser registration](https://docs.systhema.app/hu/next/payload/frontend/live-preview/client-mode.md).

## Related

- [Chip component](https://docs.systhema.app/hu/next/components/chip.md)
- [Button block](https://docs.systhema.app/hu/next/payload/blocks/button.md)