# IconButton Кнопки могут отображаться в нескольких размерах и цветах, могут содержать иконку. ## IconButton Props (свойства) для компонента IconButton: [{"name":"view","type":{"name":"enum","raw":"\"clear\" | \"default\" | \"secondary\" | \"accent\" | \"warning\" | \"dark\" | \"success\" | \"critical\" | \"black\" | \"white\"","value":[{"value":"\"clear\""},{"value":"\"default\""},{"value":"\"secondary\""},{"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\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""},{"value":"\"xl\""}]}},{"name":"disabled","type":{"name":"boolean"}},{"name":"focused","type":{"name":"boolean"}},{"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":"stretching","type":{"name":"enum","raw":"Stretching","value":[{"value":"\"filled\""},{"value":"\"fixed\""},{"value":"\"auto\""}]}},{"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"}}] ## Использование Компонент  `IconButton`  может содержать иконку, которая указывается напрямую через  `children` . ```tsx
import React from 'react';
import { IconButton } from '@salutejs/plasma-web';
import { IconClose } from '@salutejs/plasma-icons';
export function App() {
return (
<div>
<IconButton>
<IconClose color="inherit" />
</IconButton>
</div>
);
}
```