Skip to content
Snippets Groups Projects
Commit 4e0d9fc8 authored by Alexander Reifschneider's avatar Alexander Reifschneider
Browse files

OZG-6242 Add disabled styling

parent fc85378c
No related branches found
No related tags found
1 merge request!47OZG 6242 button enhancement
......@@ -39,16 +39,22 @@ export const buttonVariants = cva(
primary: 'hover:enabled:bg-primary-hover bg-primary text-white shadow-sm',
outline:
'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100 focus-visible:border-background-200',
ghost: 'border-2 border-transparent hover:border-primary-hover text-primary focus-visible:border-background-200',
ghost:
'border-2 border-transparent hover:border-primary-hover text-primary focus-visible:border-background-200 hover:disabled:border-transparent',
},
size: {
medium: 'h-9 py-2 px-4 min-w-32',
fit: 'h-fit p-2',
},
disabled: {
false: null,
true: ['opacity-70', 'cursor-not-allowed'],
},
},
defaultVariants: {
variant: 'primary',
size: 'medium',
disabled: false,
},
},
);
......@@ -60,7 +66,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
imports: [CommonModule, SpinnerIconComponent],
template: `<button
type="button"
[ngClass]="buttonVariants({ size, variant })"
[ngClass]="buttonVariants({ size, variant, disabled })"
[disabled]="isDisabled"
[attr.aria-disabled]="isDisabled"
[attr.aria-label]="text"
......
......@@ -114,7 +114,13 @@ export const IsLoading: Story = {
args: {
text: 'Loading...',
isLoading: true,
size: 'medium',
},
};
export const Disabled: Story = {
args: {
text: "Can't click me",
disabled: true,
},
};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment