> For the complete documentation index, see [llms.txt](https://dormakaba-digital.gitbook.io/reactnative-visual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dormakaba-digital.gitbook.io/reactnative-visual/components/button.md).

# Button

Buttons - every app needs buttons ;)

## Preview

The button comes in 4 variations and can hold an additional icon. Optionally you can define the button as a block element. 

![](https://3422846761-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGP0U4aBj2zuNdsU1Qu%2F-LG_5CR_np81rGoaShBN%2F-LG_5Z99KKaH2oF4QWQB%2Fbuttons.png?alt=media\&token=95466d23-8e37-453c-855e-8f9b2e3031d6)

## Code Sample

```jsx
import { Button } from '@dormakaba/digital-reactnative-visual'

<Button
  primary
  disabled
  onPress={() => {}}
>
  Primary
</Button>

<Button
  icon="icon-news"
  disabled
  onPress={() => {}}
>
  text&icon
</Button>
```

## Props

| Name     | Type     | Description                                                                     |
| -------- | -------- | ------------------------------------------------------------------------------- |
| \*       | boolean  | set type with any of: `primary`, `secondary`, `tertiary` (default: text button) |
| icon     | string   | name of the icon to display                                                     |
| onPress  | function | the action to perform on pressing the button                                    |
| disabled | boolean  | set to disabled state - no interaction possible                                 |
| \*       | boolean  | set default margin by using: `marginLeft`, `marginRight`                        |
| block    | boolean  | set to block button                                                             |