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 0b7cbd8

Browse filesBrowse files
mrholekmrholek
committed
feat(CButton): add support for unthemed outline and ghost buttons
1 parent 07027d1 commit 0b7cbd8
Copy full SHA for 0b7cbd8

File tree

Expand file treeCollapse file tree

6 files changed

+55
-11
lines changed
Filter options
Expand file treeCollapse file tree

6 files changed

+55
-11
lines changed

‎packages/coreui-react/package.json

Copy file name to clipboardExpand all lines: packages/coreui-react/package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"test:update": "jest --coverage --updateSnapshot"
4242
},
4343
"dependencies": {
44-
"@coreui/coreui": "^5.3.2",
44+
"@coreui/coreui": "^5.4.0",
4545
"@popperjs/core": "^2.11.8",
4646
"prop-types": "^15.8.1"
4747
},

‎packages/coreui-react/src/components/button/CButton.tsx

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/button/CButton.tsx
+4-4Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,29 +66,29 @@ export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps>
6666
>(
6767
(
6868
{ children, as = 'button', className, color, shape, size, type = 'button', variant, ...rest },
69-
ref,
69+
ref
7070
) => {
7171
return (
7272
<CLink
7373
as={rest.href ? 'a' : as}
7474
{...(!rest.href && { type: type })}
7575
className={classNames(
7676
'btn',
77+
variant && color ? `btn-${variant}-${color}` : `btn-${variant}`,
7778
{
7879
[`btn-${color}`]: color && !variant,
79-
[`btn-${variant}-${color}`]: color && variant,
8080
[`btn-${size}`]: size,
8181
},
8282
shape,
83-
className,
83+
className
8484
)}
8585
{...rest}
8686
ref={ref}
8787
>
8888
{children}
8989
</CLink>
9090
)
91-
},
91+
}
9292
)
9393

9494
CButton.propTypes = {

‎packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx

Copy file name to clipboard
+12Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import { CButton } from '@coreui/react'
3+
4+
export const ButtonGhostBaseClassExample = () => {
5+
return (
6+
<>
7+
<CButton variant="ghost">Base ghost button</CButton>
8+
<CButton variant="ghost" active>Active state</CButton>
9+
<CButton variant="ghost" disabled>Disabled state</CButton>
10+
</>
11+
)
12+
}

‎packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx

Copy file name to clipboard
+12Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import { CButton } from '@coreui/react'
3+
4+
export const ButtonOutlineBaseClassExample = () => {
5+
return (
6+
<>
7+
<CButton variant="outline">Base outline button</CButton>
8+
<CButton variant="outline" active>Active state</CButton>
9+
<CButton variant="outline" disabled>Disabled state</CButton>
10+
</>
11+
)
12+
}

‎packages/docs/content/components/button/index.mdx

Copy file name to clipboardExpand all lines: packages/docs/content/components/button/index.mdx
+25-5Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,41 @@ If you're using `<CButton>` component as `<a>` elements that are used to trigger
2828

2929
## Outline buttons
3030

31-
If you need a button, but without the strong background colors. Set `variant="outline"` prop to remove all background colors.
31+
### Base outline style
3232

33-
<ExampleSnippet component="ButtonOutlineExample" componentName="React Button" />
33+
The `variant="outline` property 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.
3434

35-
## Ghost buttons
35+
<ExampleSnippet component="ButtonOutlineBaseClassExample" componentName="React Button" />
3636

37-
If you need a ghost variant of react button, set `variant="ghost"` prop to remove all background colors.
37+
These React 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.
3838

39-
<ExampleSnippet component="ButtonGhostExample" componentName="React Button" />
39+
### Themed outline variants
40+
41+
If you need a button, but without the strong background colors, set `color` and `variant=" outline"` props to remove all background colors.
42+
43+
<ExampleSnippet component="ButtonOutlineExample" componentName="React Button" />
44+
45+
These outline variants of our React.js buttons retain transparent backgrounds by default, but display a background tint on hover or focus to indicate interactivity. They’re ideal for secondary actions when you want to differentiate from the standard buttons visually.
4046

4147
<Callout color="info">
4248
Some of the button styles use a relatively light foreground color, and should only be used on a
4349
dark background in order to have sufficient contrast.
4450
</Callout>
4551

52+
## Ghost buttons
53+
54+
### Base ghost style
55+
56+
Use the `variant="ghost"` property to create ultra-minimalist buttons with no borders and a fully transparent background. These React buttons rely solely on text color for visibility and apply a background highlight when hovered over or in an active state.
57+
58+
They’re perfect for interfaces where you want buttons to be present but visually unobtrusive—such as action buttons in modals, cards, or toolbars.
59+
60+
<ExampleSnippet component="ButtonGhostBaseClassExample" componentName="React Button" />
61+
62+
To apply theme colors to React ghost buttons, use the `color` and `variant="ghost"` properties. By default, these variants color only the text. On hover or focus, they add a background that corresponds to the theme color.
63+
64+
<ExampleSnippet component="ButtonGhostExample" componentName="React Button" />
65+
4666
## Sizes
4767

4868
Larger or smaller react buttons? Add `size="lg"` or `size="sm"` for additional sizes.

‎packages/docs/package.json

Copy file name to clipboardExpand all lines: packages/docs/package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
},
2626
"dependencies": {
2727
"@coreui/chartjs": "^4.1.0",
28-
"@coreui/coreui": "^5.3.2",
28+
"@coreui/coreui": "^5.4.0",
2929
"@coreui/icons": "^3.0.1",
3030
"@coreui/icons-react": "^2.3.0",
3131
"@coreui/react-chartjs": "^3.0.0",

0 commit comments

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