Skip to content

Add button examples for hover and focus states of variants #6309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add button examples for hover and focus states of variants #6309

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions packages/govuk-frontend/src/govuk/components/button/button.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,14 @@ examples:
screenshot: true
options:
text: Save and continue
- name: default hover state
options:
text: Save and continue
classes: :hover
- name: focus state
options:
text: Save and continue
classes: :focus
- name: disabled
options:
text: Disabled button
Expand All @@ -82,12 +90,36 @@ examples:
name: secondary
text: Secondary button
classes: govuk-button--secondary
- name: secondary hover state
description: A button for secondary actions
options:
name: secondary
text: Secondary button
classes: govuk-button--secondary :hover
- name: secondary disabled
options:
name: secondary
text: Secondary button disabled
classes: govuk-button--secondary
disabled: true
- name: warning
description: A button for actions that need a warning
options:
name: Warning
text: Warning button
classes: govuk-button--warning
- name: warning hover state
description: A button for actions that need a warning
options:
name: Warning
text: Warning button
classes: govuk-button--warning :hover
- name: warning disabled
options:
name: warning
text: Warning button disabled
classes: govuk-button--warning
disabled: true
- name: inverse
screenshot: true
description: A button that appears on dark backgrounds
Expand All @@ -97,6 +129,23 @@ examples:
name: Inverse
text: Inverse button
classes: govuk-button--inverse
- name: inverse hover state
description: A button that appears on dark backgrounds
pageTemplateOptions:
bodyClasses: app-template__body--inverse
options:
name: Inverse
text: Inverse button
classes: govuk-button--inverse :hover
- name: inverse disabled
description: A button that appears on dark backgrounds
pageTemplateOptions:
bodyClasses: app-template__body--inverse
options:
name: Inverse
text: Inverse button
classes: govuk-button--inverse
disabled: true

# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
- name: attributes
Expand Down