Button

The Button component lets users perform actions with a click. It supports multiple styles, sizes, and states, making it versatile for different interface needs.

<?php

use Lib\PHPXUI\Button;

?>

<div class="flex flex-wrap items-center gap-2 md:flex-row">
  <Button>Button</Button>
</div>

Installation

npm

npx phpxui add Button

Usage

use Lib\PHPXUI\Button

<Button variant="outline">Button</Button>

Examples

Link

<?php

use Lib\PHPXUI\Button;

?>

<Button variant="link">Link</Button>

Secondary

<?php

use Lib\PHPXUI\Button;

?>

<Button variant="secondary">Secondary</Button>

Outline

<?php

use Lib\PHPXUI\Button;

?>

<Button variant="outline">Outline</Button>

Destructive

<?php

use Lib\PHPXUI\Button;

?>

<Button variant="destructive">Destructive</Button>

Ghost

<?php

use Lib\PHPXUI\Button;

?>

<Button variant="ghost">Ghost</Button>

Icon

<?php

use Lib\PHPXUI\Button;
use Lib\PPIcons\ChevronRight;

?>

<Button variant="secondary" size="icon" class="size-8">
    <ChevronRight />
</Button>

With Icon

<?php

use Lib\PHPXUI\Button;
use Lib\PPIcons\GitBranchPlus;

?>

<Button variant="outline" size="sm">
    <GitBranchPlus /> New Branch
</Button>

Loading

<?php

use Lib\PHPXUI\Button;
use Lib\PPIcons\LoaderCircle;

?>

<Button size="sm" disabled="true">
    <LoaderCircle class="animate-spin" />
    Please wait
</Button>

Button const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add Button'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };

Installation

Usage

Examples

Link

Secondary

Outline

Destructive

Ghost

Icon

With Icon

Loading