# Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. Props (свойства) для компонента Button: [{"name":"view","type":{"name":"enum","raw":"\"clear\" | \"default\" | \"secondary\" | \"primary\" | \"accent\" | \"warning\" | \"dark\" | \"success\" | \"critical\" | \"black\" | \"white\"","value":[{"value":"\"clear\""},{"value":"\"default\""},{"value":"\"secondary\""},{"value":"\"primary\""},{"value":"\"accent\""},{"value":"\"warning\""},{"value":"\"dark\""},{"value":"\"success\""},{"value":"\"critical\""},{"value":"\"black\""},{"value":"\"white\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\" | \"xl\" | \"xxs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""},{"value":"\"xl\""},{"value":"\"xxs\""}]}},{"name":"disabled","type":{"name":"boolean"}},{"name":"focused","type":{"name":"boolean"}},{"name":"stretching","type":{"name":"enum","raw":"\"filled\" | \"fixed\" | \"auto\"","value":[{"value":"\"filled\""},{"value":"\"fixed\""},{"value":"\"auto\""}]}},{"name":"text","type":{"name":"string"}},{"name":"contentLeft","type":{"name":"ReactNode"}},{"name":"contentPlacing","type":{"name":"enum","raw":"ContentPlacing","value":[{"value":"\"default\""},{"value":"\"relaxed\""}]}},{"name":"additionalContent","type":{"name":"ReactNode"}},{"name":"isLoading","type":{"name":"boolean"}},{"name":"loader","type":{"name":"ReactNode"}},{"name":"stretch","type":{"name":"boolean"}},{"name":"square","type":{"name":"boolean"}},{"name":"pin","type":{"name":"enum","raw":"\"square-square\" | \"square-clear\" | \"clear-square\" | \"clear-clear\" | \"clear-circle\" | \"circle-clear\" | \"circle-circle\"","value":[{"value":"\"square-square\""},{"value":"\"square-clear\""},{"value":"\"clear-square\""},{"value":"\"clear-clear\""},{"value":"\"clear-circle\""},{"value":"\"circle-clear\""},{"value":"\"circle-circle\""}]}},{"name":"outlined","type":{"name":"boolean"}},{"name":"shiftLeft","type":{"name":"boolean"}},{"name":"shiftRight","type":{"name":"boolean"}},{"name":"blur","type":{"name":"enum","raw":"\"small\" | \"medium\" | \"large\"","value":[{"value":"\"small\""},{"value":"\"medium\""},{"value":"\"large\""}]}},{"name":"value","type":{"name":"string | number"}},{"name":"contentRight","type":{"name":"ReactNode"}}] :::caution Взаимоисключающие свойства
Свойство  `value`  - это значение кнопки. Оно отображается справа от основного текста. 
`value`  и  `contentRight`  взаимоисключающие: если передано одно, второе передать нельзя.
::: ## Использование Компонент  `Button`  может содержать текст, который указывается в
свойстве  `text` , или любой контент напрямую через  `children` . Свойство text можно использовать вместе со свойствами  `contentLeft`  и  `contentRight` .
С их помощью можно размещать  иконку  слева или справа от текста. ```tsx
import React from 'react';
import { Button } from '@salutejs/plasma-web';
import { IconDownload } from '@salutejs/plasma-icons';
export function App() {
return (
<div>
<Button text="Текст" />
<Button text="Текст" contentLeft={<IconDownload color="inherit" />} />
<Button text="Текст" contentRight={<IconDownload color="inherit" />} />
<Button text="Текст" isLoading />
<Button text="Текст" isLoading loader={<div>Loader...</div>} />
</div>
);
}
```