Skip to content

Commit b2ee30a

Browse files
fix(ButtonV2): button corner when used as Link
1 parent df862e2 commit b2ee30a

File tree

3 files changed

+47
-1
lines changed

3 files changed

+47
-1
lines changed
20.2 KB
Loading

src/components/ButtonV2/Button.stories.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { action } from '@storybook/addon-actions';
33

44
import ButtonV2, { type ButtonV2Plain } from './Button';
55
import { Stack } from '../layout';
6+
import Link from '../Link/Link';
67

78
/**
89
* A Button is a fundamental interactive element in user interfaces,
@@ -401,6 +402,51 @@ export const HasIconEnd: Story = {
401402
},
402403
};
403404

405+
export const AsLinkComponent: Story = {
406+
args: {
407+
children: 'Navigate to Link',
408+
size: 'md',
409+
variant: 'base',
410+
},
411+
render: (args) => (
412+
<Stack gap="md" style={{ alignItems: 'flex-start' }}>
413+
<div>
414+
<p style={{ marginBottom: '8px', fontSize: '14px', color: '#666' }}>
415+
<strong>ButtonV2 as Link component</strong>
416+
</p>
417+
<ButtonV2 as={Link} href="/destination" {...args} />
418+
</div>
419+
<div>
420+
<p style={{ marginBottom: '8px', fontSize: '14px', color: '#666' }}>
421+
<strong>ButtonV2 as anchor tag</strong>
422+
</p>
423+
<ButtonV2 as="a" href="/destination" {...args} />
424+
</div>
425+
<div>
426+
<p style={{ marginBottom: '8px', fontSize: '14px', color: '#666' }}>
427+
<strong>Regular Link component (for comparison)</strong>
428+
</p>
429+
<Link href="/destination">Regular Link Text</Link>
430+
</div>
431+
<div>
432+
<p style={{ marginBottom: '8px', fontSize: '14px', color: '#666' }}>
433+
<strong>Regular Button</strong>
434+
</p>
435+
<ButtonV2 {...args} />
436+
</div>
437+
</Stack>
438+
),
439+
parameters: {
440+
docs: {
441+
description: {
442+
story:
443+
'ButtonV2 can be rendered as a Link component using the `as` prop. ' +
444+
'This is useful for navigation buttons that need to behave as links while maintaining button styling.',
445+
},
446+
},
447+
},
448+
};
449+
404450
export const VisualTestsDisabled: Story = {
405451
args: {
406452
children: 'Button',

src/components/ButtonV2/components.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const ButtonRoot = styled.button`
1414
align-items: center;
1515
justify-content: center;
1616
gap: var(--sscds-space-1x);
17-
border-radius: var(--sscds-radii-button);
17+
border-radius: var(--sscds-radii-button) !important;
1818
line-height: var(--sscds-font-lineheight-elementlabel);
1919
font-weight: var(--sscds-font-weight-elementlabel-default);
2020
white-space: nowrap;

0 commit comments

Comments
 (0)