> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# LabeledSeparator

> Separa il contenuto con un'etichetta di testo centrata o allineata alla fine.

## Panoramica

`LabeledSeparator` compone [Separatore](https://docs.twenty.com/it/ui/primitives/layout/separator.md) e [Testo](https://docs.twenty.com/it/ui/primitives/typography/text.md) in un divisore orizzontale denominato. L'applicazione fornisce l'etichetta e la spaziatura circostante.

**Light**

[Separatore con etichetta tra le opzioni di importazione (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Separatore con etichetta tra le opzioni di importazione (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-layout-labeledseparator--display)

## Utilizzo

```tsx theme={null}
import { LabeledSeparator } from 'twenty-ui/components/layout';
import { Button } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const ImportOptions = () => (
  <Text
    style={{
      display: 'grid',
      gap: 'var(--t-spacing-3)',
      width: 320,
      maxWidth: '100%',
    }}
  >
    <Button fullWidth>Import a CSV file</Button>
    <LabeledSeparator>Or</LabeledSeparator>
    <Button fullWidth variant="outline">
      Connect a data source
    </Button>
  </Text>
);
```

## Posizionamento e tono dell'etichetta

`labelPosition` è impostato per impostazione predefinita su `center`, con una linea su ciascun lato dell'etichetta. Usa `end` per posizionare l'etichetta dopo la linea iniziale. L'etichetta accetta una stringa fornita e localizzata dall'applicazione.

`tone` è impostato per impostazione predefinita su `neutral`. Usa `danger` per un indicatore rosso con un'etichetta di peso medio e una linea più spessa. Imposta `hasStartMarker` per aggiungere un piccolo terminale decorativo all'inizio della linea.

Il terminale facoltativo segue il [design condiviso delle linee del calendario e della chat](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=118289-146574).

**Light**

[Indicatore di non letto con un'etichetta allineata alla fine (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--unread-marker\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Indicatore di non letto con un'etichetta allineata alla fine (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--unread-marker\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-layout-labeledseparator--unread-marker)

```tsx theme={null}
import { LabeledSeparator } from 'twenty-ui/components/layout';

export const UnreadMarker = () => (
  <LabeledSeparator
    labelPosition="end"
    tone="danger"
    hasStartMarker
    style={{ width: 488, maxWidth: '100%' }}
  >
    New
  </LabeledSeparator>
);
```

## Spaziatura e stato dell'applicazione

Il componente riempie il relativo contenitore e non aggiunge alcun margine esterno. Usa la spaziatura del layout padre o `style` e `className` nativi per margini e allineamento. Mantieni nell'applicazione gli scostamenti per avatar adiacenti o posizioni del calendario.

Il componente presenta l'etichetta fornita. L'applicazione decide dove collocare un confine di non letto o un indicatore del calendario e quando è visibile.

## Accessibilità e composizione

L'elemento radice espone un separatore orizzontale denominato in base alla relativa etichetta. I segmenti della linea e l'indicatore iniziale facoltativo sono decorativi, quindi la tecnologia assistiva non annuncia separatori aggiuntivi. Gli attributi accessibili nativi possono fornire un nome o una descrizione diversi quando necessario.

Gli attributi nativi, gli stili, i nomi delle classi e `ref` si applicano al `div` esterno. Usa `render` per comporre un altro elemento non interattivo inoltrando le props fornite e ref. `LabeledSeparatorProps` viene esportato da `twenty-ui/components/layout`.

## Migrazione

Sostituisci il `LabeledDivider` del frontend con `LabeledSeparator`. Rinomina `textPosition` in `labelPosition` e usa `tone="danger"` per l'aspetto rosso dell'indicatore di non letto. Rimuovi `noMargin`, poiché i margini esterni sono impostati su zero per impostazione predefinita. Mantieni la precedente spaziatura predefinita con `style={{ marginBlock: 'var(--t-spacing-3)' }}` dove necessario.

## Props

**children** `string` *required*

Text naming the separator. Supplied and localized by the caller.

**hasStartMarker** `boolean` (default: false)

Show a decorative cap at the beginning of the rule.

**labelPosition** `"center" | "end"` (default: center)

Place the label between two lines or at the end of one line.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**tone** `"danger" | "neutral"` (default: neutral)

Neutral divider or red marker with a thicker rule.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.