upstream-twenty/packages/twenty-docs/snippets/ui/generated/navigation/list-item.mdx

{/*
 * _____                    _
 *|_   _|_      _____ _ __ | |_ _   _
 *  | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file
 *  | |  \ V  V /  __/ | | | |_| |_| | DO NOT EDIT - changes will be overwritten
 *  |_|   \_/\_/ \___|_| |_|\__|\__, | Generated by: npx nx generate:ui twenty-docs
 *                              |___/
 *
 * This file is generated from the documentation data in packages/twenty-ui/generated.
 * To update it, edit the component prop types or design tokens in twenty-ui and run:
 *   npx nx generate:ui twenty-docs
 */}

<ParamField body="actions" type="ReactNode">
  Trailing content, such as buttons, rendered after the content.
</ParamField>

<ParamField body="color" type="&quot;neutral&quot; | &quot;danger&quot;" default="neutral">
  Color of the text and icons. `danger` marks a destructive action.
</ParamField>

<ParamField body="description" type="ReactNode">
  Supporting text, placed according to `descriptionPlacement`.
</ParamField>

<ParamField body="descriptionPlacement" type="&quot;inline&quot; | &quot;end&quot;" default="inline">
  Where the description renders: inline after the content or at the end of
  the row.
</ParamField>

<ParamField body="disabled" type="boolean" default="false">
  Prevents clicks and applies the disabled style.
</ParamField>

<ParamField body="endIcon" type="ReactNode">
  Icon rendered after the content.
</ParamField>

<ParamField body="focused" type="boolean" default="false">
  Applies the highlighted style, for example to the focused item of a list.
</ParamField>

<ParamField body="hasSubmenu" type="boolean" default="false">
  Shows a chevron indicating that the item opens a submenu.
</ParamField>

<ParamField body="hotkeys" type="string[]">
  Keyboard shortcut keys displayed at the end of the row. Registering the
  shortcut is up to the application.
</ParamField>

<ParamField body="indicator" type="&quot;none&quot; | &quot;checkbox&quot; | &quot;check&quot;" default="none">
  Selection indicator: a check icon after the content or a checkbox before
  it.
</ParamField>

<ParamField body="render" type="ReactElement&lt;unknown, string | JSXElementConstructor&lt;any&gt;&gt; | ComponentRenderFn&lt;HTMLProps, ListItemState&gt;">
  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.
</ParamField>

<ParamField body="selected" type="boolean" default="false">
  Whether the item is selected. Shows the check or checkbox indicator when
  `indicator` is set.
</ParamField>

<ParamField body="startIcon" type="ReactNode">
  Icon rendered before the content.
</ParamField>