Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit db7ea55

Browse filesBrowse files
mrholekmrholek
committed
feat(Buttons): add .btn-ghost and .btn-outline variants
1 parent c662076 commit db7ea55
Copy full SHA for db7ea55

File tree

3 files changed

+92
-7
lines changed
Filter options

3 files changed

+92
-7
lines changed

‎docs/content/components/buttons.md

Copy file name to clipboardExpand all lines: docs/content/components/buttons.md
+37-7Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ If you are using the `.btn` class on its own, remember to at least define some e
2727

2828
## Variants
2929

30-
3130
CoreUI includes a bunch of predefined Bootstrap buttons, each serving its own semantic purpose. CoreUI also offers some unique buttons styles.
3231

3332
Buttons show what action will happen when the user clicks or touches it. Bootstrap buttons are used to initialize operations, both in the background or foreground of an experience.
@@ -80,6 +79,20 @@ If you're using `.btn` classes on `<a>` elements that are used to trigger functi
8079

8180
## Outline buttons
8281

82+
### Base outline style: `.btn-outline`
83+
84+
The `.btn-outline` class provides a neutral outline button style without any color modifiers. It’s useful as a foundation for minimal buttons without background color or strong visual emphasis.
85+
86+
{{< example >}}
87+
<button type="button" class="btn btn-outline">Base outline button</button>
88+
<button type="button" class="btn btn-outline active">Active state</button>
89+
<button type="button" class="btn btn-outline" disabled>Disabled state</button>
90+
{{< /example >}}
91+
92+
These buttons use a transparent background, subtle border, and inherit text color from the parent context. They’re best suited for minimalist UI elements like modals, toolbars, or secondary actions.
93+
94+
### Themed outline variants: `.btn-outline-*`
95+
8396
If you need a button, but without the strong background colors. Replace the default modifier classes with the `.btn-outline-*` ones to remove all background colors on any element with `.btn` class.
8497

8598
{{< example >}}
@@ -90,20 +103,37 @@ If you need a button, but without the strong background colors. Replace the defa
90103
{{< /buttons.inline >}}
91104
{{< /example >}}
92105

106+
These outline variant buttons retain transparent backgrounds by default, but display a subtle background tint on hover or focus to indicate interactivity. They're ideal for secondary actions when you want to visually differentiate from solid `.btn-*` buttons.
107+
93108
{{< callout info >}}
94109
Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
95110
{{< /callout >}}
96111

97112
## Ghost buttons
98113

99-
Use `.btn-ghost-*` class for ghost buttons.
114+
### Base ghost style: `.btn-ghost`
115+
116+
Use the `.btn-ghost` class to create ultra-minimalist buttons with no borders and a fully transparent background. These buttons rely solely on text color for visibility and apply a subtle background highlight on hover or active states.
117+
118+
They’re perfect for interfaces where you want buttons to be present but visually unobtrusive—such as action buttons in modals, cards, or toolbars.
100119

101120
{{< example >}}
102-
{{< buttons.inline >}}
103-
{{- range (index $.Site.Data "theme-colors") }}
104-
<button type="button" class="btn btn-ghost-{{ .name }}">{{ .name | title }}</button>
105-
{{- end -}}
106-
{{< /buttons.inline >}}
121+
<button type="button" class="btn btn-ghost">Base ghost button</button>
122+
<button type="button" class="btn btn-ghost active">Active state</button>
123+
<button type="button" class="btn btn-ghost" disabled>Disabled state</button>
124+
{{< /example >}}
125+
126+
### Themed ghost variants: `.btn-ghost-*`
127+
128+
To apply theme colors to ghost buttons, use `.btn-ghost-*` classes. These variants color only the text by default. On hover or focus, they add a faint background tint corresponding to the theme color.
129+
130+
{{< example >}}
131+
<button type="button" class="btn btn-ghost-primary">Primary</button>
132+
<button type="button" class="btn btn-ghost-secondary">Secondary</button>
133+
<button type="button" class="btn btn-ghost-success">Success</button>
134+
<button type="button" class="btn btn-ghost-danger">Danger</button>
135+
<button type="button" class="btn btn-ghost-warning">Warning</button>
136+
<button type="button" class="btn btn-ghost-info">Info</button>
107137
{{< /example >}}
108138

109139
## Sizes

‎scss/_buttons.scss

Copy file name to clipboardExpand all lines: scss/_buttons.scss
+32Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,38 @@
138138
// Alternate buttons
139139
//
140140

141+
.btn-ghost {
142+
// scss-docs-start btn-ghost-css-vars
143+
--#{$prefix}btn-color: #{$btn-ghost-color};
144+
--#{$prefix}btn-border-color: #{transparent};
145+
--#{$prefix}btn-active-color: #{$btn-ghost-active-color};
146+
--#{$prefix}btn-active-bg: #{$btn-ghost-active-bg};
147+
--#{$prefix}btn-active-border-color: #{$btn-ghost-active-bg};
148+
--#{$prefix}btn-disabled-color: #{$btn-ghost-disabled-color};
149+
--#{$prefix}btn-disabled-border-color: #{transparent};
150+
--#{$prefix}btn-hover-color: #{$btn-ghost-hover-color};
151+
--#{$prefix}btn-hover-bg: #{$btn-ghost-hover-bg};
152+
--#{$prefix}btn-hover-border-color: #{$btn-ghost-hover-bg};
153+
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(#{$btn-outline-focus-shadow-rgb}, .5);
154+
// scss-docs-end btn-ghost-css-vars
155+
}
156+
157+
.btn-outline {
158+
// scss-docs-start btn-outline-css-vars
159+
--#{$prefix}btn-color: #{$btn-outline-color};
160+
--#{$prefix}btn-border-color: #{$btn-outline-border-color};
161+
--#{$prefix}btn-active-color: #{$btn-outline-active-color};
162+
--#{$prefix}btn-active-bg: #{$btn-outline-active-bg};
163+
--#{$prefix}btn-active-border-color: #{$btn-outline-active-border-color};
164+
--#{$prefix}btn-disabled-color: #{$btn-outline-disabled-color};
165+
--#{$prefix}btn-disabled-border-color: #{$btn-outline-disabled-border-color};
166+
--#{$prefix}btn-hover-color: #{$btn-outline-hover-color};
167+
--#{$prefix}btn-hover-bg: #{$btn-outline-hover-bg};
168+
--#{$prefix}btn-hover-border-color: #{$btn-outline-hover-border-color};
169+
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(#{$btn-ghost-focus-shadow-rgb}, .5);
170+
// scss-docs-end btn-outline-css-vars
171+
}
172+
141173
.btn-transparent {
142174
--#{$prefix}btn-active-border-color: transparent;
143175
--#{$prefix}btn-disabled-border-color: transparent;

‎scss/_variables.scss

Copy file name to clipboardExpand all lines: scss/_variables.scss
+23Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -915,6 +915,29 @@ $btn-active-border-shade-amount: 25% !default;
915915
$btn-active-border-tint-amount: 10% !default;
916916
// scss-docs-end btn-variables
917917

918+
// scss-docs-start btn-outline-variables
919+
$btn-outline-color: var(--#{$prefix}secondary-color) !default;
920+
$btn-outline-border-color: var(--#{$prefix}border-color) !default;
921+
$btn-outline-active-color: var(--#{$prefix}body-color) !default;
922+
$btn-outline-active-bg: var(--#{$prefix}tertiary-bg) !default;
923+
$btn-outline-active-border-color: var(--#{$prefix}border-color) !default;
924+
$btn-outline-disabled-color: var(--#{$prefix}secondary-color) !default;
925+
$btn-outline-disabled-border-color: var(--#{$prefix}border-color) !default;
926+
$btn-outline-hover-color: var(--#{$prefix}body-color) !default;
927+
$btn-outline-hover-bg: var(--#{$prefix}tertiary-bg) !default;
928+
$btn-outline-hover-border-color: var(--#{$prefix}border-color) !default;
929+
$btn-outline-focus-shadow-rgb: var(--#{$prefix}tertiary-bg-rgb) !default;
930+
// scss-docs-end btn-outline-variables
931+
932+
// scss-docs-start btn-ghost-variables
933+
$btn-ghost-color: var(--#{$prefix}secondary-color) !default;
934+
$btn-ghost-active-color: var(--#{$prefix}body-color) !default;
935+
$btn-ghost-active-bg: var(--#{$prefix}tertiary-bg) !default;
936+
$btn-ghost-disabled-color: var(--#{$prefix}secondary-color) !default;
937+
$btn-ghost-hover-color: var(--#{$prefix}body-color) !default;
938+
$btn-ghost-hover-bg: var(--#{$prefix}tertiary-bg) !default;
939+
$btn-ghost-focus-shadow-rgb: var(--#{$prefix}tertiary-bg-rgb) !default;
940+
// scss-docs-end btn-ghost-variables
918941

919942
// Forms
920943

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.