@startupjs-ui/alert 0.1.13 → 0.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/README.mdx +17 -13
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @startupjs-ui/alert
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @startupjs-ui/alert
|
package/README.mdx
CHANGED
|
@@ -8,13 +8,18 @@ import { faFire } from '@fortawesome/free-solid-svg-icons'
|
|
|
8
8
|
|
|
9
9
|
# Alert
|
|
10
10
|
|
|
11
|
-
An alert displays a short, important message
|
|
11
|
+
An alert displays a short, important message that attracts the user's attention without interrupting their current task.
|
|
12
12
|
|
|
13
13
|
```jsx
|
|
14
14
|
import { Alert } from 'startupjs-ui'
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
## Simple example
|
|
18
|
+
|
|
19
|
+
You can pass custom `style` to the root element and provide content as `children` (the `label` prop is deprecated -- use `children` instead).
|
|
20
|
+
|
|
21
|
+
By default, the alert uses the `info` variant and displays a matching icon automatically.
|
|
22
|
+
|
|
18
23
|
```jsx example
|
|
19
24
|
return (
|
|
20
25
|
<Alert>
|
|
@@ -25,7 +30,7 @@ return (
|
|
|
25
30
|
|
|
26
31
|
## Variants
|
|
27
32
|
|
|
28
|
-
The alert offers four severity levels
|
|
33
|
+
The alert offers four severity levels, each with its own icon and color: `info`, `success`, `warning`, and `error`. Use the `variant` prop to set the severity level.
|
|
29
34
|
|
|
30
35
|
```jsx example
|
|
31
36
|
return (
|
|
@@ -35,11 +40,11 @@ return (
|
|
|
35
40
|
</Alert>
|
|
36
41
|
<Br />
|
|
37
42
|
<Alert variant='success'>
|
|
38
|
-
This is
|
|
43
|
+
This is a success alert — check it out!
|
|
39
44
|
</Alert>
|
|
40
45
|
<Br />
|
|
41
46
|
<Alert variant='warning'>
|
|
42
|
-
This is
|
|
47
|
+
This is a warning alert — check it out!
|
|
43
48
|
</Alert>
|
|
44
49
|
<Br />
|
|
45
50
|
<Alert variant='error'>
|
|
@@ -51,7 +56,7 @@ return (
|
|
|
51
56
|
|
|
52
57
|
## Title
|
|
53
58
|
|
|
54
|
-
|
|
59
|
+
Use the `title` prop to display a bold heading above the alert content.
|
|
55
60
|
|
|
56
61
|
```jsx example
|
|
57
62
|
return (
|
|
@@ -67,14 +72,14 @@ return (
|
|
|
67
72
|
variant='success'
|
|
68
73
|
title='Success'
|
|
69
74
|
>
|
|
70
|
-
This is
|
|
75
|
+
This is a success alert — check it out!
|
|
71
76
|
</Alert>
|
|
72
77
|
<Br />
|
|
73
78
|
<Alert
|
|
74
79
|
variant='warning'
|
|
75
80
|
title='Warning'
|
|
76
81
|
>
|
|
77
|
-
This is
|
|
82
|
+
This is a warning alert — check it out!
|
|
78
83
|
</Alert>
|
|
79
84
|
<Br />
|
|
80
85
|
<Alert
|
|
@@ -87,12 +92,11 @@ return (
|
|
|
87
92
|
)
|
|
88
93
|
```
|
|
89
94
|
|
|
90
|
-
|
|
91
95
|
## Icons
|
|
92
|
-
The `icon` property allows you to change the icon at the beginning of the component.
|
|
93
|
-
The `variant` prop defines the corresponding color for the icon.
|
|
94
96
|
|
|
95
|
-
|
|
97
|
+
Use the `icon` prop to replace the default icon with a custom one. The icon color is determined by the `variant`.
|
|
98
|
+
|
|
99
|
+
Set `icon` to `false` to hide the icon entirely.
|
|
96
100
|
|
|
97
101
|
```jsx example
|
|
98
102
|
return (
|
|
@@ -116,7 +120,7 @@ return (
|
|
|
116
120
|
|
|
117
121
|
## Actions
|
|
118
122
|
|
|
119
|
-
An alert can
|
|
123
|
+
An alert can include a close button by providing the `onClose` prop. The close button appears at the end of the alert.
|
|
120
124
|
|
|
121
125
|
```jsx example
|
|
122
126
|
const [showFirstAlert, setShowFirstAlert] = useState(true)
|
|
@@ -141,7 +145,7 @@ return (
|
|
|
141
145
|
)
|
|
142
146
|
```
|
|
143
147
|
|
|
144
|
-
|
|
148
|
+
For a fully custom action area, use the `renderActions` prop to provide your own component.
|
|
145
149
|
|
|
146
150
|
```jsx example
|
|
147
151
|
const [showSecondAlert, setShowSecondAlert] = useState(true)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/alert",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.16",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
"type": "module",
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@startupjs-ui/core": "^0.1.11",
|
|
12
|
-
"@startupjs-ui/div": "^0.1.
|
|
13
|
-
"@startupjs-ui/icon": "^0.1.
|
|
14
|
-
"@startupjs-ui/span": "^0.1.
|
|
12
|
+
"@startupjs-ui/div": "^0.1.16",
|
|
13
|
+
"@startupjs-ui/icon": "^0.1.16",
|
|
14
|
+
"@startupjs-ui/span": "^0.1.16"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": "*",
|
|
18
18
|
"react-native": "*",
|
|
19
19
|
"startupjs": "*"
|
|
20
20
|
},
|
|
21
|
-
"gitHead": "
|
|
21
|
+
"gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
|
|
22
22
|
}
|