Skip to content

Commit 5bee6e9

Browse files
Update button docs (#235)
* Update button docs * Update stories/Form Elements/Button.stories.tsx Co-authored-by: Thomas Judd-Cooper <[email protected]> --------- Co-authored-by: Thomas Judd-Cooper <[email protected]>
1 parent 8c56966 commit 5bee6e9

File tree

1 file changed

+16
-5
lines changed

1 file changed

+16
-5
lines changed

stories/Form Elements/Button.stories.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { ButtonLinkProps, ButtonProps } from '@components/form-elements/button/B
99
*
1010
* ## Implementation Notes
1111
*
12-
* When importing `Button` from `nhsuk-react-components`, the `ButtonWrapper` component is imported. This will either render a standard `Button` or `ButtonLink` component depending on whether a `href` prop is supplied.
12+
* When importing `Button` from `nhsuk-react-components`, the `ButtonWrapper` component is imported. This will either render a standard `Button` or `ButtonLink` component depending on whether an `href` prop is supplied.
1313
*
1414
* If you want to use a specific component instead of the wrapper, you can supply the `as="a"` or `as="button"` props.
1515
*
@@ -64,26 +64,37 @@ export const Primary: Story = {
6464
};
6565
export const Secondary: Story = { args: { secondary: true, children: 'Secondary' } };
6666
export const Reverse: Story = { args: { reverse: true, children: 'Reverse' } };
67+
68+
/**
69+
*
70+
* Disabled buttons have poor contrast and can confuse some users. Only use them if user research shows it makes things easier for users to understand.
71+
*
72+
*/
73+
6774
export const Disabled: Story = { args: { disabled: true, children: 'Disabled' } };
6875
export const LinkButton: Story = { args: { href: '/', children: 'As a Link' } };
6976
export const ForceButton: Story = { args: { as: 'button', children: 'As a Button' } };
7077
export const ForceAnchor: Story = { args: { as: 'a', children: 'As an Anchor' } };
71-
export const DebouncedButton: Story = {
78+
79+
/**
80+
* You can test this button by opening the browser console. It will log the current dateTime once per debounce.
81+
*
82+
* Debounced buttons can optionally provide `debounceTimeout` (measured in milliseconds) to adjust the length of the debounce.
83+
*/
84+
export const PreventDoubleClickButton: Story = {
7285
args: {
7386
preventDoubleClick: true,
7487
onClick: () => console.log(new Date()),
7588
children: 'Debounced Button',
76-
debounceTimeout: 5000,
7789
},
7890
render: (args) => <Button {...args} />,
7991
};
80-
export const DebouncedLinkButton: Story = {
92+
export const PreventDoubleClickLinkButton: Story = {
8193
args: {
8294
preventDoubleClick: true,
8395
href: '#',
8496
onClick: () => console.log(new Date()),
8597
children: 'Debounced Button as Link',
86-
debounceTimeout: 5000,
8798
},
8899
render: (args) => <Button {...args} />,
89100
};

0 commit comments

Comments
 (0)