Skip to content
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.

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

Ghost vs. Secondary Buttons #15

Merged
merged 2 commits into from
Jun 5, 2019
Merged

Conversation

chhavijustme
Copy link
Contributor

Just realized while I was researching, that we have mistakenly put ghost buttons as secondary buttons. Fixed the examples and documentation. Still not very happy with the colors though. Will run a quick design exercise to run through all the colors in our design system to finalize this one!
PS: We might just finalize the colors in the summit when almost everyone is there.

@mwiencek
Copy link
Member

Not sure about the colors, but makes sense. :) Let me know when it's no longer WIP.

@mwiencek mwiencek changed the title [WIP] Ghost vs Secondary Buttons Ghost vs. Secondary Buttons Jun 5, 2019
@mwiencek mwiencek merged commit b1bd801 into metabrainz:master Jun 5, 2019
<div>
<Button bsStyle="primary" onClick={action('clicked')}>{'Primary Button'}</Button>
<Button bsSize="small" bsStyle="primary" onClick={action('clicked')}>{'Primary Small Button'}</Button>
</div>
)))

.add('Secondary Button', withInfo('')(() => (
.add('Default Button', withInfo('Default buttons are used for secondary actions. They’re usually paired with a primary button to provide an alternate choice.')(() => (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bootstrap v4 has a dedicated "secondary" style (and with that I'm not sure we'd ever use a default button), so I removed this in #18. If we do think a button with no set style is useful we could add it back, but it'd need a different description at least.

.add('Warning Button', withInfo('')(() => (
.add('Ghost Button', withInfo('Use ghost buttons to reduce visual clutter on the screen. Take care that the actions via a ghost button are not primary actions.')(() => (
<div>
<Button bsStyle="secondary" onClick={action('clicked')}>{'Ghost Button'}</Button>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In Bootstrap v4 ghost buttons seem to correspond with outline buttons (I guess they're interchangeable): https://getbootstrap.com/docs/4.0/components/buttons/#outline-buttons. So #18 changes this to use those instead of the secondary style.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants