### Размер кнопки Размер кнопки задается с помощью свойства  `size` : 
```tsx
import React from 'react';
import { Button } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Button text="Button" size="xl" />
<Button text="Button" size="l" />
<Button text="Button" size="m" />
<Button text="Button" size="s" />
<Button text="Button" size="xs" />
<Button text="Button" size="xxs" />
</div>
);
}
```
### Ширина кнопки Ширина кнопки регулируется с помощью свойства  `stretching` .
Возможные значения свойства  `contentPlacing` : `auto`  – ширина подстраивается под контент; `filled`  – кнопка растягивается на всю доступную ширину; `fixed`  – кнопка фиксированной ширины.
```tsx
import React from 'react';
import { Button } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<Button text="Button" stretching="fixed" />
<Button text="Button" stretching="auto" />
<Button text="Button" stretching="filled" />
</div>
);
}
```
### Позиционирование контента внутри Позиционирование контента внутри кнопки регулируется с помощью свойства  `contentPlacing` .
Возможные значения свойства  `contentPlacing` : `default`  – контент центрируется; `relaxed`  – контент располагается по краям.
```tsx
import React from 'react';
import { Button } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
</div>
);
}
```
### Вид кнопки Вид кнопки задается с помощью свойства  `view` . Возможные значения свойства  `view` : `"default"`  – по умолчанию; `"accent"`  – акцентная; `"primary"`  – основная; `"secondary"`  – вторичная; `"clear"`  – без цветового сопровождения. `"success"`  – успешное завершение; `"warning"`  – предупреждение; `"critical"`  – ошибка; `"dark"`  – темная; `"black"`  – черная; `"white"`  – белая. 
```tsx
import React from 'react';
import { Button } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
<Button text="Кнопка" size="s" view="default" />
<Button text="Кнопка" size="s" view="primary" />
<Button text="Кнопка" size="s" view="accent" />
<Button text="Кнопка" size="s" view="secondary" />
<Button text="Кнопка" size="s" view="clear" />
<Button text="Кнопка" size="s" view="success" />
<Button text="Кнопка" size="s" view="warning" />
<Button text="Кнопка" size="s" view="critical" />
<Button text="Кнопка" size="s" view="dark" />
<Button text="Кнопка" size="s" view="black" />
<Button text="Кнопка" size="s" view="white" />
</div>
);
}
```
### Границы кнопки Границы кнопки задаются с помощью свойства  `pin` . Возможные значения свойства  `pin` : `square`  – обычное скругление; `circle`  – сильное скругление; `clear`  – нет скругления. 
```tsx
import React from 'react';
import { Button } from '@salutejs/plasma-web';
export function App() {
return (
<div>
<Button pin="square-square">Button</Button>
<Button pin="square-clear">Button</Button>
<Button pin="clear-square">Button</Button>
<Button pin="clear-clear">Button</Button>
<Button pin="clear-circle">Button</Button>
<Button pin="circle-clear">Button</Button>
<Button pin="circle-circle">Button</Button>
</div>
);
}
```
### Гиперссылка Компонент поддерживает вывод в виде тега  `<a>` , для этого необходимо указать свойство  `as` : 
```tsx
import React from 'react';
import { Button } from '@salutejs/plasma-web';
export function App() {
return (
<Button as="a" text="Гиперссылка" />
);
}
```