-
-
Notifications
You must be signed in to change notification settings - Fork 10
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
Conversation
Not sure about the colors, but makes sense. :) Let me know when it's no longer WIP. |
<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.')(() => ( |
There was a problem hiding this comment.
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> |
There was a problem hiding this comment.
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.
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.