Skip to content

Commit

Permalink
Merge pull request #2075 from cfpb/ans_btn_group
Browse files Browse the repository at this point in the history 
Update button groups to use flexbox
  • Loading branch information
@anselmbradford
anselmbradford authored Oct 25, 2024
2 parents bcff414 + fe857d0 commit 33a3d20
Show file tree
Hide file tree
Showing 18 changed files with 76 additions and 81 deletions.
109 changes: 52 additions & 57 deletions docs/pages/buttons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,24 @@ description: Buttons are UI elements that signal actions. They should be used
call to action. In contrast,
[links](https://cfpb.github.io/design-system/components/links) should lead
users to another page or further information.

Buttons that appear in a group together with other buttons should be wrapped
in a container with the `m-btn-group` class to properly space the buttons
across screen sizes.
variation_groups:
- variation_group_name: Types
variation_group_description: ''
variations:
- variation_code_snippet: >-
<button class="a-btn" title="Default state">Default state</button>
<button class="a-btn hover" title="Hovered state">Hovered state</button>
<div class="m-btn-group">
<button class="a-btn" title="Default state">Default state</button>
<button class="a-btn focus" title="Focused state">Focused state</button>
<button class="a-btn hover" title="Hovered state">Hovered state</button>
<button class="a-btn focus" title="Focused state">Focused state</button>
<button class="a-btn active" title="Active state">Active state</button>
<button class="a-btn active" title="Active state">Active state</button>
</div>
variation_description:
Use a primary button for an action that goes to the next
step. Avoid using multiple primary buttons on a single page; there can
Expand All @@ -38,40 +41,39 @@ variation_groups:
variation_specs: ''
variation_name: Primary button
- variation_code_snippet: >-
<button class="a-btn a-btn--secondary" title="Default state">Default
state</button>
<button class="a-btn a-btn--secondary hover" title="Hovered state">Hovered state</button>
<div class="m-btn-group">
<button class="a-btn a-btn--secondary" title="Default state">Default
state</button>
<button class="a-btn a-btn--secondary focus" title="Focused state">Focused state</button>
<button class="a-btn a-btn--secondary hover" title="Hovered state">Hovered state</button>
<button class="a-btn a-btn--secondary focus" title="Focused state">Focused state</button>
<button class="a-btn a-btn--secondary active" title="Active state">Active state</button>
<button class="a-btn a-btn--secondary active" title="Active state">Active state</button>
</div>
variation_description: Use a secondary button for actions that happen on the current page.
variation_name: Secondary button
variation_specs: ''
- variation_code_snippet: >-
<button class="a-btn a-btn--disabled" title="Default state"
disabled>Default state</button>
<button class="a-btn a-btn--disabled hover" title="Hovered state" disabled>Hovered state</button>
<div class="m-btn-group">
<button class="a-btn a-btn--disabled" title="Default state"
disabled>Default state</button>
<button class="a-btn a-btn--disabled hover" title="Hovered state" disabled>Hovered state</button>
<button class="a-btn a-btn--disabled focus" title="Focused state" disabled>Focused state</button>
<button class="a-btn a-btn--disabled focus" title="Focused state" disabled>Focused state</button>
</div>
variation_name: Disabled button
variation_specs: ''
- variation_code_snippet: >-
<button class="a-btn a-btn--warning" title="Default state">Default
state</button>
<button class="a-btn a-btn--warning hover" title="Hovered state">Hovered state</button>
<div class="m-btn-group">
<button class="a-btn a-btn--warning" title="Default state">Default
state</button>
<button class="a-btn a-btn--warning hover" title="Hovered state">Hovered state</button>
<button class="a-btn a-btn--warning focus" title="Focused state">Focused state</button>
<button class="a-btn a-btn--warning focus" title="Focused state">Focused state</button>
</div>
variation_name: Destructive button
variation_specs: ''
- variation_name: Destructive action
Expand All @@ -88,24 +90,15 @@ variation_groups:
variation_name: Full-width button (on x-small screens)
variation_description: Reduce screen size to see this button in action.
variation_code_snippet: >-
<button class="a-btn a-btn--full-on-xs" title="Default state">Default
state</button>
<button class="a-btn a-btn--full-on-xs hover" title="Hovered state">Hovered state</button>
<div class="m-btn-group">
<button class="a-btn a-btn--full-on-xs" title="Default state">Default
state</button>
<button class="a-btn a-btn--full-on-xs focus" title="Focused state">Focused state</button>
<button class="a-btn a-btn--full-on-xs hover" title="Hovered state">Hovered state</button>
<button class="a-btn a-btn--full-on-xs focus" title="Focused state">Focused state</button>
<button class="a-btn a-btn--full-on-xs active" title="Active state">Active state</button>
- variation_is_deprecated: false
variation_name: Button group
variation_code_snippet: |-
<div class="m-btn-group">
<button class="a-btn">Yes</button>
<button class="a-btn">No</button>
<button class="a-btn">Maybe</button>
<button class="a-btn a-btn--full-on-xs active" title="Active state">Active state</button>
</div>
- variation_is_deprecated: false
variation_name: Button with icon
Expand All @@ -115,21 +108,23 @@ variation_groups:
before the button’s text. Each icon should be used exclusively and
consistently for one action. Icons should never be underlined.
variation_code_snippet: |-
<button class="a-btn">
<span class="a-btn__icon
a-btn__icon--on-left">
{% include icons/left.svg %}
</span>
Back
</button>
<button class="a-btn">
Next
<span class="a-btn__icon
a-btn__icon--on-right">
{% include icons/right.svg %}
</span>
</button>
<div class="m-btn-group">
<button class="a-btn">
<span class="a-btn__icon
a-btn__icon--on-left">
{% include icons/left.svg %}
</span>
Back
</button>
<button class="a-btn">
Next
<span class="a-btn__icon
a-btn__icon--on-right">
{% include icons/right.svg %}
</span>
</button>
</div>
- variation_is_deprecated: false
variation_name: Button with animated icon
variation_code_snippet: >-
Expand Down
2 changes: 1 addition & 1 deletion packages/cfpb-design-system/dist/components/cfpb-buttons/index.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 33a3d20

Please sign in to comment.