docs: [OUDS] Small adjustments on buttons doc

[hannahiss]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

Description

• add more margin around buttons in doc to be compliant with design documentation, in particular between buttons side to side
• add missing dot at the end of warning callout like in "Links"
• remove useless fill="currentColor" on <svg>s since it is already set into the sprite file, and mention it in the doc
• remove useless width="1rem" height="1rem" on <svg>s since it is already done by styling, and remove it in the doc
• remove CSS/Sass variables at the end
• fix "JavaScript" typo in the loading button example

Motivation & Context

Small fixes to do regarding what has been done on other documentation pages, and forgotten elements.

Types of change

• Bug fix (non-breaking which fixes an issue)

Live previews

• https://deploy-preview-2904--boosted.netlify.app/

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	ba77ab4
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/67dd364552ed470008206141
😎 Deploy Preview	https://deploy-preview-2904--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[vprothais]

I find this change dangerous, because we could have component containing button, like inline alert, and we don't want to change the margin in this case. The direct child selector should be kept I think (but it won't work for button in div or other container :/

Maybe the most reliable way to do it is to add a parent class for this style and to add this class in the button examples ?