Buttons | Razor UI

Buttons

<x-app-ui::button size="sm">
    Small button
</x-app-ui::button>

<x-app-ui::button>
    Normal button
</x-app-ui::button>

<x-app-ui::button size="lg">
    Large button
</x-app-ui::button>

<x-app-ui::button color="secondary" size="sm">
    Small button
</x-app-ui::button>

<x-app-ui::button color="secondary">
    Normal button
</x-app-ui::button>

<x-app-ui::button color="secondary" size="lg">
    Large button
</x-app-ui::button>

<x-app-ui::button color="danger" size="sm">
    Small button
</x-app-ui::button>

<x-app-ui::button color="danger">
    Normal button
</x-app-ui::button>

<x-app-ui::button color="danger" size="lg">
    Large button
</x-app-ui::button>

<x-app-ui::button icon="iconic-link" size="sm">
    Small button
</x-app-ui::button>

<x-app-ui::button icon="iconic-link">
    Normal button
</x-app-ui::button>

<x-app-ui::button icon="iconic-link" size="lg">
    Large button
</x-app-ui::button>

<x-app-ui::button
    icon="iconic-link"
    icon-position="after"
    size="sm"
>
    Small button
</x-app-ui::button>

<x-app-ui::button icon="iconic-link" icon-position="after">
    Normal button
</x-app-ui::button>

<x-app-ui::button
    icon="iconic-link"
    icon-position="after"
    size="lg"
>
    Large button
</x-app-ui::button>

API

`app-ui::button`

Attributes

Name	Default	Options	Notes
`color`	`primary`	`danger`, `primary`, `secondary`, `success`, `warning`
`icon`		Any Blade icon component name
`icon-position`	`before`	`after`, `before`
`tag`	`button`	`a`, `button`	Defines the underlying HTML tag used, and thus the button's capabilities. For example, only `a` buttons may use the `href` attribute.
`size`	`md`	`lg`, `md`, `sm`

Slots

Name	Notes
Main	Contains the text content of the button.