From 9013c9884e53be23f58e00026035baa38f2a31a2 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Tue, 3 Jan 2023 11:28:27 +0000 Subject: [PATCH] Docs: add explanation of the base `.btn` class (#37275) * Docs: add explanation of the base `.btn` class and a callout reminding authors to at least define some focus styling if they intend to use it "naked" * Turn callout into a warning * Add initial heading * Tweak callout wording --- site/content/docs/5.3/components/buttons.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md index 396beec7f3..8d9ff0201c 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -6,7 +6,21 @@ group: components toc: true --- -## Examples +## Base class + +Bootstrap has a base `.btn` class that sets up basic styles such as padding and content alignment. By default, `.btn` controls have a transparent border and background color, and lack any explicit focus and hover styles. + +{{< example >}} + +{{< /example >}} + +The `.btn` class is intended to be used in conjunction with our additional predefined button styles, or to serve as a basis for your own custom styles. + +{{< callout warning >}} +If you are using the `.btn` class on its own, remember to at least define some explicit `:focus` and/or `:focus-visible` styles. +{{< /callout >}} + +## Predefined styles Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.