Legacy (shadcn-uikit)Components
Button
Triggers an action or event.
Usage
import { Button } from '@acronis-platform/shadcn-uikit';Variants
The button supports multiple visual variants for different action contexts.
View sourceHide source
import { Button } from '@acronis-platform/shadcn-uikit/react';
export function ButtonVariants() {
return (
<div className="button-grid">
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
</div>
);
}
Sizes
Buttons come in different sizes to fit various layout needs.
View sourceHide source
import { Button } from '@acronis-platform/shadcn-uikit/react';
export function ButtonSizes() {
return (
<div className="button-grid">
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon" variant="secondary">
⋯
</Button>
</div>
);
}
Disabled state
Disabled buttons indicate that an action is not currently available.
View sourceHide source
import { Button } from '@acronis-platform/shadcn-uikit/react';
export function ButtonDisabled() {
return (
<div className="button-grid">
<Button disabled>Disabled</Button>
</div>
);
}
Translucent
Translucent buttons for use on colored backgrounds.
View sourceHide source
import { Button } from '@acronis-platform/shadcn-uikit/react';
export function ButtonTranslucent() {
return (
<div className="button-grid">
<Button variant="translucent">Translucent</Button>
</div>
);
}