# [Usage](../../usage.md) > Components and standard attributes
This readme will provide a full list of standard attributes shared by many components. You will find the list of available attributes directly in the components page, plus the custom attributes only for the specific component and how to use them.

Why this matters: every form and visual component follows the same `::make()` + `->set*()` + Blade-echo pattern, so learning it once lets you use Button, Card, Input, Table, and the rest without relearning.

---
## How to use components


A component is built with class `::make()` in controller and echoed in Blade, or called as fully-qualified class directly in Blade.

### 1. Build in controller
The component is called as class directly in the back-end and then passed to the view as data:
```php
Component::make()
```
For example, with the real class names:
```php
use KFramework\Components\Visual\Button;
use KFramework\Components\Visual\Alert;

Button::make()->setContent('Save');
Alert::make()->setContent('Saved!');
```

All the components are available from backend using their classes, the `::make()` method will create a new instance of that component.

End-to-end — build in controller and echo in Blade, or call directly in Blade:

Build in controller:

```php
use KFramework\Components\Visual\Button;
use KFramework\Components\Visual\Card;

public function show()
{
    $button = Button::make()->setContent('Save');
    $card = Card::make()->setContent('Hello');

    return view('demo', compact('button', 'card'));
}
```

Echo in Blade:

```php
{!! $button !!}
{!! $card !!}
{!! \KFramework\Components\Visual\Button::make()->setContent('Save') !!}
{!! \KFramework\Components\Visual\Card::make()->setContent('Hello') !!}
```

Use controller build when the component needs DB data, auth checks, or reuse across views; call directly in Blade for static or view-local components.

### 2. Setting its attributes
Is possible to set its attributes in two ways, using the `->setAttribute()` method:

```php
Component::make()
    ->setAttribute('attribute_name', $value)
```

Concrete example:

```php
use KFramework\Components\Forms\Input;

Input::make('email')
    ->setAttribute('placeholder', 'you@example.com');
```

or, in Blade:

```php
{!! \KFramework\Components\Forms\Input::make('email')->setAttribute('placeholder', 'you@example.com') !!}
```

or using the _SET_ functions, and each attribute has one, following camelcase:

```php
Component::make()
    ->setAttribute1($value1)
    ->setAttribute2($value2)
    ...
    ->setAttributeN($valueN)
```

An attribute, can also handle callbacks:

```php
Component::make()
    ->setLabel(function () {
        return 'label for component';
    })
```
Callbacks, depending on the type of component or the parent component (example, a Form), can also receive callable variables:
```php
Component::make()
    ->setAttributeName(function ($component, $record, $fields, ...) {
        //
    })
```

The `::make()` method will initialize a new instance of the component class. Very important to reset attributes. But can also be used to set the `name` attribute of the component:

```php
Component::make('component_name')
```

The name can also be set with its `SET` function:

```php
Component::make()
    ->setName('component_name')
```

_NOTE:_ the attributes are always listed in the component page, and they are always **all optional**.

In this guide you will find the name of the attribute, or its `set` method or both:  
`attribute_name` | `->setMethod()`

_NOTE:_ attribute name can be the same but its functionality can vary depending on the usage or component type. Check the component specific page to understand how.

---
## Basic attributes and methods

- [::make()](shared_attributes/make.md)  
- [setAttribute()](shared_attributes/set_attribute.md)  
- [setCustomProperty() | getCustomProperty()](shared_attributes/custom_property.md)  
- [uuid](shared_attributes/uuid.md)  

### HTML attributes  
- [ID](shared_attributes/id.md)  
- [classes](shared_attributes/classes.md)  
- [extraAttributes](shared_attributes/extra_attributes.md)  

### Component internal attributes 
Here is the list of the components internal attributes, click on the attribute to read the full documentation.

- [name](shared_attributes/name.md)  
- [label](shared_attributes/label.md)  
- [type](shared_attributes/type.md)  
- [value](shared_attributes/value.md)  
- [default](shared_attributes/default.md)  
- [placeholder](shared_attributes/placeholder.md)  
- [disabled](shared_attributes/disabled.md)  
- [fixed](shared_attributes/fixed.md)  
- [hidden](shared_attributes/hidden.md)  
- [render](shared_attributes/render.md)  
- [required](shared_attributes/required.md)  
- [multiple](shared_attributes/multiple.md)  
- [disableSubmit](shared_attributes/disable_submit.md)  
- [disableCancel](shared_attributes/disable_cancel.md)  
- [disableClean](shared_attributes/disable_clean.md)  
- [closeable](shared_attributes/closeable.md)  
- [URL](shared_attributes/url.md)  
- [action](./shared_attributes/action.md)  
- [content](shared_attributes/content.md)  
- [schema](shared_attributes/schema.md)  
- [lazyLoadSchema](shared_attributes/lazy_load_schema.md)  
- [footerSchema](shared_attributes/footer_schema.md)  
- [actionButtons](shared_attributes/action_buttons.md)  
- [values](shared_attributes/values.md)  
- [defaults](shared_attributes/defaults.md)  
- [updateOnChange](shared_attributes/update_on_change.md)  
- [onLoadChange](shared_attributes/on_load_change.md)  
- [validate](shared_attributes/validate.md)  
- [progressBar](shared_attributes/progress_bar.md)  
- [authorize](shared_attributes/authorize.md)  
- [authorizeRole](shared_attributes/authorizeRole.md)  

### Styling
- [style](shared_attributes/style.md)  
- [preIcon](shared_attributes/pre_icon.md)
- [preIconColor](shared_attributes/pre_icon_color.md)  
- [postIcon](shared_attributes/post_icon.md)  
- [postIconColor](shared_attributes/post_icon_color.md)  
- [submitText](./shared_attributes/submit_text.md)  
- [small](shared_attributes/small.md)  
- [columns](shared_attributes/columns.md)  
- [footerColumns](shared_attributes/footer_columns.md)  
- [columnSpan](shared_attributes/column_span.md)  
- [dimension](shared_attributes/dimension.md)  
- [transparent](shared_attributes/transparent.md)  
- [hint](shared_attributes/hint.md)  
- [overlayHint](shared_attributes/hintOverlay.md)  

---

## Additional notes  
Always refer to the component specific page to understand particularities as specific types or what standard attributes it supports, plus the additional attributes specifically made for the component.

Try a form + visual combo to see the pattern compose:

Build in controller:

```php
use KFramework\Components\Forms\Input;
use KFramework\Components\Visual\Card;

$card = Card::make()->setContent(
    Input::make('name')->setLabel('Name')->setPlaceholder('Jane')
);

return view('demo', compact('card'));
```

Echo in Blade:

```php
{!! $card !!}
{!! \KFramework\Components\Visual\Card::make()->setContent(
    \KFramework\Components\Forms\Input::make('name')->setLabel('Name')
) !!}
```

**See also / Next steps:** setup recap in [Installation](../../installation.md), layout shell in [UI basics and config](../styling/basics.md), full map in [Usage](../../usage.md). Then pick a concrete component: [Form](forms/form.md), [Input](forms/input.md), [Card](visuals/card.md), [Button](visuals/button.md), [Alert](visuals/alert.md), [Table](visuals/table.md).