Portal UI : Button

Button

Displays a button or a component that looks like a button.

<x-portal::button>Primary</x-portal::button>

Publishing Component

If you want to customize the components, you can publish them by running the following command :

php artisan vendor:publish --tag=portal-ui:button --force

Variants

Use the variant prop to change the visual style of the button.

<x-portal::button>Primary</x-portal::button>
<x-portal::button variant="danger">Danger</x-portal::button>
<x-portal::button variant="outline">Outline</x-portal::button>
<x-portal::button variant="secondary">Secondary</x-portal::button>
<x-portal::button variant="ghost">Ghost</x-portal::button>
<x-portal::button variant="link">Link</x-portal::button>

Size

<x-portal::button variant="outline" size="xl">Extra Large</x-portal::button>
<x-portal::button variant="outline" size="lg">Large</x-portal::button>
<x-portal::button variant="outline">Default</x-portal::button>
<x-portal::button variant="outline" size="sm">Small</x-portal::button>
<x-portal::button variant="outline" size="xs">Extra Small</x-portal::button>

Icon

<x-portal::button variant="outline" class="!px-2">
    <x-tabler-dots class="h-4.5" />
</x-portal::button>
<x-portal::button variant="outline">
    <x-tabler-download class="h-4.5" />
    Export
</x-portal::button>
<x-portal::button variant="outline">
    Open
    <x-tabler-chevron-down class="h-4.5" />
</x-portal::button>

As Link

Visit Google

<x-portal::button href="https://www.google.com/" target="_blank" variant="outline">
    Visit Google
    <x-tabler-arrow-up-right class="h-4.5" />
</x-portal::button>

Loading

<x-portal::button type="submit" loading>
    Loading
</x-portal::button>

Full Width

<x-portal::button class="w-full">Full Width</x-portal::button>