diff --git a/.changeset/odd-walls-yawn.md b/.changeset/odd-walls-yawn.md new file mode 100644 index 00000000000..576618e7c8b --- /dev/null +++ b/.changeset/odd-walls-yawn.md @@ -0,0 +1,100 @@ +--- +"@primer/react": patch +--- + +## Button deprecation + +The new set of Button components brings a much needed update. +The older version was a set of seven different components. Each variant of the component had a separate component. +The guidelines to put in icons inside the buttons was also vague. With the new components, we now have a great guidance for common button usage. + +## Change list + +### Button variants + +We now support a variant property which takes values `primary`, `invisible`, `outline` and `danger` + +#### Before + +```jsx +import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react' + + Primary Button + + Invisible Button + + Outline Button + + Danger Button + +``` + +#### After + +```jsx +import {Button} from '@primer/react' + + + + + + + + + +``` + +### Leading and Trailing icons + +In the previous component, we allowed icon components to be direct children. This results in a lot of custom styling for the icon components. +In the new one, we now have `leadinIcon` and `trailingIcon` properties. + +#### Before + +```jsx + +``` + +#### After + +```jsx + +``` + +### Icon buttons + +Icon only buttons are common usages in products. So we now have a component for the specific usecase + +#### Before + +```jsx + +``` + +#### After + +```jsx + +``` + +### Size property + +Earlier we used `variant` to mean size property. Now we have a new property called `size` which is more semantically correct. + +#### Before + +```jsx + +``` + +#### After + +```jsx + +``` +