> ## 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.

# LightButton

> Предоставляет облегченные действия со стандартным или ненавязчивым акцентом.

## Обзор

Используйте общий компонент `LightButton` для облегченного действия. Он объединяет
[Button](https://docs.twenty.com/ru/ui/primitives/input/button.md) с поверхностью ghost, небольшим размером, обычной
толщиной шрифта и без возвышения.

**Light**

[Пример LightButton (light)](https://storybook.twenty.com/iframe.html?id=ui-components-lightbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример LightButton (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-lightbutton--display\&viewMode=story\&globals=colorScheme:dark)

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

## Использование

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

export const FilterAction = () => <LightButton>Add filter</LightButton>;
```

## Визуальные параметры

Сравните обычное и ненавязчивое выделение для распространенных состояний действий.

**Light**

[Выделение и состояния светлой кнопки (light)](https://storybook.twenty.com/iframe.html?id=ui-components-lightbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Выделение и состояния светлой кнопки (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-lightbutton--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-lightbutton--catalog)

## Управление состоянием

`LightButton` использует модель состояния Button и не добавляет собственного состояния. Ваше приложение задаёт `loading` и `disabled`; `emphasis` изменяет только внешний вид. См. [пример управления состоянием Button](https://docs.twenty.com/ru/ui/primitives/input/button.md#state-ownership) для управления асинхронным действием. Управляемый и неуправляемый режимы выбора отсутствуют.

## Выделение и значки

```tsx theme={null}
import { LightButton } from 'twenty-ui/components/input';
import { IconPlus } from 'twenty-ui/icon';

export const FilterActions = () => (
  <LightButton emphasis="subtle" startIcon={<IconPlus />}>
    Add filter
  </LightButton>
);
```

По умолчанию `emphasis="standard"` использует вторичный нейтральный текст.
`emphasis="subtle"` использует третичный нейтральный текст на поверхностях ghost, outline и soft. Семантические цвета и сплошные поверхности сохраняют контрастное оформление.

При необходимости переопределите `variant`, `color`, `size` или `elevated`.
[ButtonGroup](https://docs.twenty.com/ru/ui/primitives/input/button-group.md) может задавать общий размер, поверхность
и цвет. Явно заданный внешний вид дочернего элемента имеет приоритет над группой, а затем следуют
значения компонента по умолчанию. Ненавязчивое выделение не заменяет семантический цвет.

## Взаимодействие

`LightButton` принимает нативные атрибуты Button, refs, обработчики событий, слоты
иконок, состояния загрузки и отключения, а также композицию render. Его нативное значение по умолчанию
— `type="button"`. Установите `type="submit"` для отправки или используйте `href` для ссылки.
Передайте `render`, чтобы выбрать пользовательский корневой элемент, включая ссылку маршрутизатора,
принадлежащую приложению. Установите `nativeButton={false}` и `role="link"` для рендерера навигации.
Пользовательские нативные кнопки сохраняют `nativeButton` равным true.

## Свойства

**className** `string | ((state: ButtonState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**color** `"accent" | "danger" | "inherit" | "neutral" | "success"`

Semantic color of the button. `inherit` uses the surrounding text color for the label, icons, loader, and outline border, with translucent black interaction surfaces. It supports outline, ghost, soft, and link. Resolving solid with inherit throws, including appearance inherited from ButtonGroup and wrapper defaults.

**elevated** `boolean`

Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.

**emphasis** `"standard" | "subtle"` (default: standard)

Uses secondary or tertiary text for neutral buttons. Semantic colors and solid surfaces retain their contrast treatment.

**endIcon** `ReactNode`

Decorative content displayed after the label.

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

Whether the button should be focusable when disabled.

**fullWidth** `boolean`

Expands the button to fill its container width.

**href** `string`

Destination URL. Renders a native anchor when `render` is omitted unless `nativeButton` is explicitly true. Custom renderers retain their own element contract.

**loading** `boolean`

Shows a loading indicator and disables activation.

**loadingPosition** `"center" | "end" | "start"`

Where the loading indicator appears. `center` hides the content while preserving its layout space; `start` and `end` keep children and the opposite icon visible and replace the corresponding icon with the spinner.

**nativeButton** `boolean` (default: true)

Whether the rendered root is a native button. Defaults to true for custom renderers. The built-in `href` anchor defaults to false; an explicit value takes precedence.

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

Caller-supplied root element or renderer. Native attributes, handlers, event details, and refs reach the rendered root. Use `nativeButton={false}` and `role="link"` for a custom navigation anchor. Router integration belongs to the caller.

**role** `AriaRole`

Role of the root element. Use `link` for custom navigation renderers.

**shortcut** `ShortcutDefinition`

Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.

**shortcutJoinLabel** `string`

Localized text between sequence steps. Defaults to then.

**size** `"md" | "sm"` (default: sm)

Button height: `sm` (24px) or `md` (32px). The `link` variant uses its content height at either size.

**startIcon** `ReactNode`

Decorative content displayed before the label.

**style** `CSSProperties | ((state: ButtonState) =\> CSSProperties | undefined)`

Style applied to the element, or a function that
returns a style object based on the component's state.

**variant** `"ghost" | "link" | "outline" | "soft" | "solid"` (default: ghost)

Visual treatment of the button surface. `link` uses compact text styling without a filled surface or border; render composition determines native semantics.


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