# [Usage](../../../usage.md) > [Components](../basics.md) > [Visuals](../basics.md) > Button

Single call-to-action that navigates, opens a [Modal](modal.md) or runs custom JavaScript. Use a standalone Button for one action; use [Buttons Group](button_group.md) when several related actions belong in a split/dropdown cluster, and `type: badge` for compact status pills.

![image](img/button_1.png)

```php
{!!
    \KFramework\Components\Visual\Button::make('Button 1')
        ->setType('primary')
        ->setPreIcon('account')
!!}

{!!
    \KFramework\Components\Visual\Button::make('Button 2')
        ->setType('success')
!!}

{!!
    \KFramework\Components\Visual\Button::make('Button 3')
        ->setType('badge')
        ->setColor('danger')
        ->setPreIcon('stop')
!!}
```

**End-to-end example:** edit button opening a modal from a list row.
```php
// Blade:
{!!
    \KFramework\Components\Visual\Button::make('Edit user')
        ->setType('primary')
        ->setPreIcon('pencil')
        ->setModal('edit-user-modal')
        ->setHint('Open the edit dialog')
!!}

// Controller:
use KFramework\Components\Visual\Button;

$button = Button::make('Edit user')
    ->setType('primary')
    ->setUrl('/users/1/edit');

return view('users.index', compact('button'));
```

---
## Usage

- Blade:
```php
{!! \KFramework\Components\Visual\Button::make() !!}
```
- Controller:
```php
Button::make()
```

---
## Standard attributes

- `uuid`
- `id`
- `classes`
- `extraAttributes`
- `name` | `label`
  - Setting the name will set the label of the button, `name` overrides `label`.
- `type`: Set type of the button and its color, except for the badge button. Allowed types:
  - `primary`
  - `secondary`
  - `badge`
  - `success`
  - `warning`
  - `danger`  
  Default is `secondary`
- `disabled`
- `hidden`
- `small`
- `preIcon`
- `postIcon`
- `prefix`
  - Set a badge on the top-right corner of the button
- `suffix`
  - Set a badge on the bottom-right corner of the button
- `columnSpan`
- `url`
  - Set the `href` when button is clicked
- `action` — backend action or route resolved when the button is pressed.
- `hint`
  - Set a popup message when hovering the button

See their usage and description [here](../basics.md).


---
## Component-specific attributes

### `color` | `->setColor()`
Used to set the color for the `badge` button, allowed colors:
  - `primary`
  - `secondary`
  - `success`
  - `warning`
  - `danger`  

| Types    | Default     |
|----------|-------------|
| `string` | `secondary` |


### `modal` | `->setModal()`
Can handle both a string or a `Modal`. If string, means it will try to open a modal by `name` and if not set it will try by `id`. If instead a `Modal` is used, it will create a modal with the button to use.  

| Types                    | Default |
|--------------------------|---------|
| `string`, `Modal::class` | `null`  |


### `onClick` | `->setOnClick()`  
If this is set, `modal` will be overridden. This will place a string into the `onclick=""` of the button, executing a custom script.  

| Types    | Default |
|----------|---------|
| `string` | `null`  |


### `prefix` | `->setPrefix()`
Renders the given value as a small badge on the top-right corner of the button. Accepts text or numbers.  

```php
{!!
    \KFramework\Components\Visual\Button::make('Inbox')
        ->setType('primary')
        ->setPrefix(3)
!!}
```

| Types    | Default |
|----------|---------|
| `string` | `null`  |


### `suffix` | `->setSuffix()`
Renders the given value as a small badge on the bottom-right corner of the button. Accepts text or numbers.  

```php
{!!
    \KFramework\Components\Visual\Button::make('Inbox')
        ->setType('primary')
        ->setSuffix(3)
!!}
```

| Types    | Default |
|----------|---------|
| `string` | `null`  |

### `label` inside repeaters | `->setLabel()`
Inside a `Repeater` row the button keeps its display label instead of the generated row path. Prefer `Button::make()->setLabel('Reset')` over `Button::make('Reset')` for refresh buttons placed in repeating rows.

```php
{!!
    \KFramework\Components\Visual\Button::make()
        ->setLabel('Reset')
        ->setUpdateOnChange(fn($fields) => [])
!!}
```

| Types    | Default |
|----------|---------|
| `string` | `null`  |

## See also
- [Components basics](../basics.md)
- [Buttons Group](button_group.md), [Modal](modal.md), [Card](card.md)
- [url](../shared_attributes/url.md), [action](../shared_attributes/action.md), [hint](../shared_attributes/hint.md)
- [simple_popup](../../utilities/frontend/simple_popup.md)