button component can be wide

This commit is contained in:
Kiril Videlov 2023-03-28 15:35:18 +02:00 committed by Kiril Videlov
parent 74ddc05509
commit cb3432292d
2 changed files with 24 additions and 1 deletions

View File

@ -2,6 +2,7 @@
export let primary = false; export let primary = false;
export let filled = true; export let filled = true;
export let small = false; export let small = false;
export let wide = false;
export let label: string; export let label: string;
</script> </script>
@ -34,7 +35,8 @@ And the following optional props:
: filled : filled
? 'default-filled' ? 'default-filled'
: 'default-nofill'} : 'default-nofill'}
{small ? 'size-small' : 'size-normal'} {small ? 'short' : ''}
{wide ? 'wide' : ''}
" "
type="button" type="button"
on:click on:click
@ -98,4 +100,7 @@ And the following optional props:
.size-small { .size-small {
@apply px-2 py-1; @apply px-2 py-1;
} }
.wide {
width: 119.5px;
}
</style> </style>

View File

@ -40,6 +40,24 @@ export const PrimarySmall: Story = {
} }
}; };
export const PrimaryWide: Story = {
args: {
primary: true,
wide: true,
label: 'Button'
}
};
export const PrimarySmallWide: Story = {
args: {
primary: true,
wide: true,
small: true,
label: 'Button'
}
};
export const PrimaryFilledSmall: Story = { export const PrimaryFilledSmall: Story = {
args: { args: {
primary: true, primary: true,