diff --git a/packages/core/package.json b/packages/core/package.json
index e8c516cd..f448a849 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@viamrobotics/prime-core",
- "version": "0.0.89",
+ "version": "0.0.90",
"publishConfig": {
"access": "public"
},
diff --git a/packages/core/src/lib/button/__tests__/icon-button.spec.ts b/packages/core/src/lib/button/__tests__/icon-button.spec.ts
index d755143f..d9ac7b65 100644
--- a/packages/core/src/lib/button/__tests__/icon-button.spec.ts
+++ b/packages/core/src/lib/button/__tests__/icon-button.spec.ts
@@ -21,6 +21,11 @@ describe('IconButton', () => {
);
});
+ it('Renders a button in the style of the secondary variant if variant is specified as secondary', () => {
+ render(IconButton, { ...common, variant: 'secondary' });
+ expect(screen.getByRole('button')).toHaveClass('border-light', 'bg-light');
+ });
+
it('Renders a button in the style of danger if the variant is specified as danger', () => {
render(IconButton, { ...common, variant: 'danger' });
expect(screen.getByRole('button')).toHaveClass(
diff --git a/packages/core/src/lib/button/icon-button.svelte b/packages/core/src/lib/button/icon-button.svelte
index e9cebc66..9253f7fa 100644
--- a/packages/core/src/lib/button/icon-button.svelte
+++ b/packages/core/src/lib/button/icon-button.svelte
@@ -27,7 +27,7 @@ export let disabled = false;
export let type: 'button' | 'submit' | 'reset' = 'button';
/** The communicated action type to the user. */
-export let variant: 'primary' | 'danger' = 'primary';
+export let variant: 'primary' | 'secondary' | 'danger' = 'primary';
/** Additional CSS classes to pass to the button. */
let extraClasses: cx.Argument = '';
@@ -48,6 +48,8 @@ $: handleDisabled = preventHandler(disabled);
'cursor-not-allowed text-gray-4': disabled,
'hover:text-gray-7 active:text-gray-8':
variant === 'primary' && !disabled,
+ 'border-light bg-light hover:border-medium hover:bg-medium active:border-medium active:bg-gray-2':
+ variant === 'secondary' && !disabled,
'hover:bg-danger-dark hover:bg-opacity-[0.08] hover:text-danger-dark active:bg-[rgba(190,53,54,0.16)] active:text-danger-dark':
variant === 'danger' && !disabled,
},
diff --git a/packages/core/src/lib/code-snippet.svelte b/packages/core/src/lib/code-snippet.svelte
index 53e760ce..c4d31c02 100644
--- a/packages/core/src/lib/code-snippet.svelte
+++ b/packages/core/src/lib/code-snippet.svelte
@@ -192,5 +192,6 @@ figure pre[class*='language-'] {
figure pre[class*='language-'] > code[class*='language-'] {
font-family: 'Roboto Mono Variable', 'Roboto Mono', ui-monospace, monospace;
+ font-size: 1em;
}
diff --git a/packages/storybook/src/stories/icon-button.mdx b/packages/storybook/src/stories/icon-button.mdx
index 3787782a..c6477f0f 100644
--- a/packages/storybook/src/stories/icon-button.mdx
+++ b/packages/storybook/src/stories/icon-button.mdx
@@ -15,6 +15,10 @@ import { IconButton } from '@viamrobotics/prime-core';
+
+
diff --git a/packages/storybook/src/stories/icon-button.stories.svelte b/packages/storybook/src/stories/icon-button.stories.svelte
index b8beefe0..6b4d05cc 100644
--- a/packages/storybook/src/stories/icon-button.stories.svelte
+++ b/packages/storybook/src/stories/icon-button.stories.svelte
@@ -12,6 +12,14 @@ import { IconButton } from '@viamrobotics/prime-core';
/>
+
+
+
+