feat: add icon support to Button component
This commit is contained in:
@@ -34,4 +34,7 @@
|
|||||||
background-color: var(--nds-disabled);
|
background-color: var(--nds-disabled);
|
||||||
color: var(--nds-neutral);
|
color: var(--nds-neutral);
|
||||||
}
|
}
|
||||||
|
&--icon {
|
||||||
|
padding: var(--nds-spacing-2xs) var(--nds-spacing-xs);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -2,11 +2,12 @@
|
|||||||
export interface Props {
|
export interface Props {
|
||||||
type: 'primary' | 'secondary';
|
type: 'primary' | 'secondary';
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
icon?: boolean;
|
||||||
}
|
}
|
||||||
const { type, disabled = false } = Astro.props;
|
const { type, disabled = false, icon = false } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class={`button button__${type} ${disabled ? 'button--disabled' : ''}`}>
|
<div class={`button button__${type} ${disabled ? 'button--disabled' : ''} ${icon ? 'button--icon' : ''}`}>
|
||||||
<slot/>
|
<slot/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user