@qoretechnologies/reqore 0.56.0 → 0.56.1
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/dist/components/Button/index.d.ts +6 -0
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +3 -0
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/DatePicker/index.d.ts.map +1 -1
- package/dist/components/DatePicker/index.js +1 -1
- package/dist/components/DatePicker/index.js.map +1 -1
- package/dist/components/Dropdown/index.d.ts +1 -1
- package/dist/components/Dropdown/index.d.ts.map +1 -1
- package/dist/components/Dropdown/index.js +2 -2
- package/dist/components/Dropdown/index.js.map +1 -1
- package/dist/components/InternalPopover/index.d.ts +3 -0
- package/dist/components/InternalPopover/index.d.ts.map +1 -1
- package/dist/components/InternalPopover/index.js +2 -2
- package/dist/components/InternalPopover/index.js.map +1 -1
- package/dist/components/Menu/index.d.ts +4 -1
- package/dist/components/Menu/index.d.ts.map +1 -1
- package/dist/components/Panel/index.d.ts +3 -0
- package/dist/components/Panel/index.d.ts.map +1 -1
- package/dist/components/Panel/index.js +18 -3
- package/dist/components/Panel/index.js.map +1 -1
- package/dist/components/Popover/index.d.ts +1 -0
- package/dist/components/Popover/index.d.ts.map +1 -1
- package/dist/components/Popover/index.js +129 -20
- package/dist/components/Popover/index.js.map +1 -1
- package/dist/components/Textarea/index.d.ts.map +1 -1
- package/dist/components/Textarea/index.js +1 -1
- package/dist/components/Textarea/index.js.map +1 -1
- package/dist/constants/sizes.d.ts +64 -2
- package/dist/constants/sizes.d.ts.map +1 -1
- package/dist/constants/sizes.js +99 -39
- package/dist/constants/sizes.js.map +1 -1
- package/dist/containers/UIProvider.d.ts +6 -0
- package/dist/containers/UIProvider.d.ts.map +1 -1
- package/dist/containers/UIProvider.js +3 -0
- package/dist/containers/UIProvider.js.map +1 -1
- package/dist/index.d.ts +5 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/docs/docs/components/button.mdx +391 -0
- package/docs/docs/components/input.mdx +328 -0
- package/docs/docs/components/panel.mdx +442 -0
- package/docs/docs/components/table.mdx +872 -0
- package/docs/docs/guides/effects.mdx +586 -0
- package/docs/docs/guides/getting-started.mdx +164 -0
- package/docs/docs/guides/theming.mdx +252 -0
- package/docs/docs/intro.md +98 -0
- package/docs/sidebars.js +23 -0
- package/package.json +11 -3
- package/tests.json +1 -1
- package/typedoc.json +10 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UIProvider.js","sourceRoot":"","sources":["../../src/containers/UIProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAmC;AACnC,uDAAiC;AACjC,qCAAgC;AAChC,+BAAmE;AACnE,qEAAmE;AACnE,gEAAuD;AACvD,4CAAiE;AAEjE,yEAAmD;AACnD,4CAAyF;AACzF,oEAA8C;AAC9C,kEAAkD;
|
|
1
|
+
{"version":3,"file":"UIProvider.js","sourceRoot":"","sources":["../../src/containers/UIProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAmC;AACnC,uDAAiC;AACjC,qCAAgC;AAChC,+BAAmE;AACnE,qEAAmE;AACnE,gEAAuD;AACvD,4CAAiE;AAEjE,yEAAmD;AACnD,4CAAyF;AACzF,oEAA8C;AAC9C,kEAAkD;AAwBlD,IAAM,WAAW,OAAG,qCAAiB,oVAAA,8KASb,EAAuD,gGAO9E,KAPuB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,IAAA,eAAI,EAAC,IAAA,+BAAsB,EAAC,KAAK,CAAC,EAAE,GAAG,CAAC;AAAxC,CAAwC,CAO9E,CAAC;AAEF,IAAM,YAAY,GAAG,8BAAM,CAAC,GAAG,0HAAA,iDAK3B,EAED,IACF,KAHG,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,WAAA,uBAAG,4FAAA,eACT,EAAmD,OAC7D,KADU,IAAA,yBAAgB,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC;AAD7C,CAEhB,CACF,CAAC;AAEF,IAAM,YAAY,GAAG,IAAA,YAAI,EACvB,IAAA,kBAAU,EAAyB,UAAC,MAAM,EAAE,GAAG;IAC7C,OAAO,CACL,uBAAC,0BAAmB,cAClB,uBAAC,YAAY,IAAC,EAAE,EAAC,eAAe,EAAC,GAAG,EAAE,GAAG,GAAI,GACzB,CACvB,CAAC;AACJ,CAAC,CAAC,CACH,CAAC;AAEF;;GAEG;AACH,IAAM,gBAAgB,GAAqC,IAAA,YAAI,EAAC,UAAC,EAA4B;QAA1B,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;IACnF,IAAA,KAAgC,IAAA,gBAAQ,EAAM,KAAK,CAAC,EAAnD,WAAW,QAAA,EAAE,cAAc,QAAwB,CAAC;IAE3D,IAAM,MAAM,GAA0B,IAAA,eAAO,EAAC,cAAM,OAAA,IAAA,kBAAS,EAAC,KAAK,IAAI,EAAE,CAAC,EAAtB,CAAsB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACrF,IAAM,aAAa,GAAiB,IAAA,eAAO,EAAC,cAAM,OAAA,IAAA,kBAAS,EAAC,qBAAa,CAAC,EAAxB,CAAwB,EAAE,EAAE,CAAC,CAAC;IAChF,IAAM,YAAY,GAAiB,IAAA,eAAO,EACxC,cAAM,OAAA,IAAA,mBAAU,EAAC,IAAA,kBAAK,EAAC,aAAa,EAAE,MAAM,CAAC,CAAC,EAAxC,CAAwC,EAC9C,CAAC,aAAa,EAAE,MAAM,CAAC,CACxB,CAAC;IAEF,OAAO,CACL,2DACE,wBAAC,yBAAY,CAAC,QAAQ,aAAC,KAAK,eAAO,YAAY,kBAC7C,uBAAC,0BAAmB,cAClB,uBAAC,WAAW,KAAG,GACK,EACtB,uBAAC,mBAAmB,aAAC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,gBACnD,WAAW,CAAC,CAAC,CAAC,uBAAC,2BAAc,aAAC,OAAO,EAAE,OAAO,gBAAG,QAAQ,IAAkB,CAAC,CAAC,CAAC,IAAI,IAC/D,EACtB,uBAAC,YAAY,IAAC,GAAG,EAAE,cAAc,GAAI,KACf,GACvB,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAe,gBAAgB,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ export { ReqoreDropdownDivider, ReqoreDropdownItem } from './components/Dropdown
|
|
|
17
17
|
export { ReqoreEffect, ReqoreTextEffect } from './components/Effect';
|
|
18
18
|
export { ReqoreErrorBoundary } from './components/ErrorBoundary';
|
|
19
19
|
export { ReqoreModalsWrapper } from './components/GlobalModalsWrapper';
|
|
20
|
-
export {
|
|
20
|
+
export { ReqoreH1, ReqoreH2, ReqoreH3, ReqoreH4, ReqoreH5, ReqoreH6, ReqoreHeading, } from './components/Header';
|
|
21
21
|
export { default as ReqoreIcon } from './components/Icon';
|
|
22
22
|
export { default as ReqoreInput } from './components/Input';
|
|
23
23
|
export { ReqoreKeyValueTable } from './components/KeyValueTable';
|
|
@@ -38,14 +38,14 @@ export { default as ReqoreNotificationsWrapper } from './components/Notification
|
|
|
38
38
|
export { default as ReqoreNotification } from './components/Notifications/notification';
|
|
39
39
|
export { ReqorePagination } from './components/Paging';
|
|
40
40
|
export { ReqorePanel, ReqorePanelSkeleton } from './components/Panel';
|
|
41
|
-
export {
|
|
41
|
+
export { ReqoreP, ReqoreP as ReqoreParagraph } from './components/Paragraph';
|
|
42
42
|
export { ReqorePopover } from './components/Popover';
|
|
43
43
|
export { default as ReqoreRadioGroup } from './components/RadioGroup';
|
|
44
|
-
export {
|
|
44
|
+
export { ReqoreRichTextEditor } from './components/RichTextEditor';
|
|
45
45
|
export { ReqoreSkeleton } from './components/Skeleton';
|
|
46
46
|
export { ReqoreSlider } from './components/Slider';
|
|
47
47
|
export { ReqoreHorizontalSpacer, ReqoreSpacer, ReqoreVerticalSpacer } from './components/Spacer';
|
|
48
|
-
export {
|
|
48
|
+
export { ReqoreSpan } from './components/Span';
|
|
49
49
|
export { ReqoreSpinner } from './components/Spinner';
|
|
50
50
|
export { default as ReqoreTable } from './components/Table';
|
|
51
51
|
export { ReqoreTableBodyCell } from './components/Table/cell';
|
|
@@ -66,7 +66,7 @@ export { Colors as ReqoreColors } from './constants/colors';
|
|
|
66
66
|
export { ReqoreSizes } from './constants/sizes';
|
|
67
67
|
export { ReqoreIntents } from './constants/theme';
|
|
68
68
|
export { ReqorePaginationContainer } from './containers/Paging';
|
|
69
|
-
export {
|
|
69
|
+
export { default as ReqoreNotifications, modalStore } from './containers/ReqoreProvider';
|
|
70
70
|
export { default as ReqoreUIProvider } from './containers/UIProvider';
|
|
71
71
|
export { default as ReqoreContext } from './context/ReqoreContext';
|
|
72
72
|
export { default as ReqoreThemeContext } from './context/ThemeContext';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -15,7 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
15
15
|
};
|
|
16
16
|
exports.__esModule = true;
|
|
17
17
|
exports.ReqoreParagraph = exports.ReqoreP = exports.ReqorePanelSkeleton = exports.ReqorePanel = exports.ReqorePagination = exports.ReqoreNotification = exports.ReqoreNotificationsWrapper = exports.ReqoreNavbarItem = exports.ReqoreNavbarGroup = exports.ReqoreNavbarDivider = exports.ReqoreHeader = exports.ReqoreFooter = exports.ReqoreMultiSelect = exports.ReqoreModal = exports.ReqoreMessage = exports.ReqoreMenuSection = exports.ReqoreMenuItem = exports.ReqoreMenuDivider = exports.ReqoreMenu = exports.ReqoreLayoutContent = exports.ReqoreKeyValueTable = exports.ReqoreInput = exports.ReqoreIcon = exports.ReqoreHeading = exports.ReqoreH6 = exports.ReqoreH5 = exports.ReqoreH4 = exports.ReqoreH3 = exports.ReqoreH2 = exports.ReqoreH1 = exports.ReqoreModalsWrapper = exports.ReqoreErrorBoundary = exports.ReqoreTextEffect = exports.ReqoreEffect = exports.ReqoreDropdownItem = exports.ReqoreDropdownDivider = exports.ReqoreDropdown = exports.ReqoreBackdrop = exports.ReqoreDrawer = exports.ReqoreControlGroup = exports.ReqoreContent = exports.ReqoreCommentFeed = exports.ReqoreComment = exports.ReqoreColumn = exports.ReqoreColumns = exports.ReqoreCollection = exports.ReqoreCheckbox = exports.ReqoreButton = exports.ReqoreBreadcrumbsItem = exports.ReqoreBreadcrumbs = void 0;
|
|
18
|
-
exports.useReqoreTheme = exports.useReqoreProperty = exports.useReqore = exports.useReqorePaging = exports.useLatestZIndex = exports.useCloneThroughFragments = exports.ReqoreThemeContext = exports.ReqoreContext = exports.ReqoreUIProvider = exports.
|
|
18
|
+
exports.useReqoreTheme = exports.useReqoreProperty = exports.useReqore = exports.useReqorePaging = exports.useLatestZIndex = exports.useCloneThroughFragments = exports.ReqoreThemeContext = exports.ReqoreContext = exports.ReqoreUIProvider = exports.modalStore = exports.ReqoreNotifications = exports.ReqorePaginationContainer = exports.ReqoreIntents = exports.ReqoreSizes = exports.ReqoreColors = exports.ReqoreTree = exports.ReqoreTimeAgo = exports.ReqoreTier = exports.ReqoreTextarea = exports.ReqoreTagGroup = exports.ReqoreTag = exports.ReqoreTabsList = exports.ReqoreTabsListItem = exports.ReqoreTabsContent = exports.ReqoreTabs = exports.ReqoreTableValue = exports.ReqoreTableRow = exports.ReqoreTableHeaderCell = exports.ReqoreTableBodyCell = exports.ReqoreTable = exports.ReqoreSpinner = exports.ReqoreSpan = exports.ReqoreVerticalSpacer = exports.ReqoreSpacer = exports.ReqoreHorizontalSpacer = exports.ReqoreSlider = exports.ReqoreSkeleton = exports.ReqoreRichTextEditor = exports.ReqoreRadioGroup = exports.ReqorePopover = void 0;
|
|
19
19
|
var Breadcrumbs_1 = require("./components/Breadcrumbs");
|
|
20
20
|
__createBinding(exports, Breadcrumbs_1, "default", "ReqoreBreadcrumbs");
|
|
21
21
|
var item_1 = require("./components/Breadcrumbs/item");
|
|
@@ -164,8 +164,8 @@ __createBinding(exports, theme_1, "ReqoreIntents");
|
|
|
164
164
|
var Paging_2 = require("./containers/Paging");
|
|
165
165
|
__createBinding(exports, Paging_2, "ReqorePaginationContainer");
|
|
166
166
|
var ReqoreProvider_1 = require("./containers/ReqoreProvider");
|
|
167
|
-
__createBinding(exports, ReqoreProvider_1, "modalStore");
|
|
168
167
|
__createBinding(exports, ReqoreProvider_1, "default", "ReqoreNotifications");
|
|
168
|
+
__createBinding(exports, ReqoreProvider_1, "modalStore");
|
|
169
169
|
var UIProvider_1 = require("./containers/UIProvider");
|
|
170
170
|
__createBinding(exports, UIProvider_1, "default", "ReqoreUIProvider");
|
|
171
171
|
var ReqoreContext_1 = require("./context/ReqoreContext");
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,wDAAwE;AAA/D,wEAA4B;AACrC,sDAAiF;AAAxE,qEAAgC;AACzC,8CAA8D;AAArD,8DAAuB;AAChC,kDAAkE;AAAzD,kEAAyB;AAClC,sDAA2D;AAAlD,2DAAgB;AACzB,gDAAqD;AAA5C,qDAAa;AACtB,sDAA2D;AAAlD,mDAAY;AACrB,gDAAqD;AAA5C,qDAAa;AACtB,wDAA6D;AAApD,6DAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,0DAA0E;AAAjE,0EAA6B;AACtC,0DAAwC;AACxC,8CAAmD;AAA1C,mDAAY;AACrB,yDAA8D;AAArD,uDAAc;AACvB,kDAAkE;AAAzD,kEAAyB;AAClC,mDAAuF;AAA9E,0DAAqB;AAAE,uDAAkB;AAClD,8CAAqE;AAA5D,mDAAY;AAAE,uDAAgB;AACvC,4DAAiE;AAAxD,iEAAmB;AAC5B,wEAAuE;AAA9D,uEAAmB;AAC5B,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,391 @@
|
|
|
1
|
+
---
|
|
2
|
+
sidebar_position: 1
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import LiveDemo from '../../src/components/LiveDemo';
|
|
6
|
+
import { ReqoreButton, ReqoreControlGroup } from '../../../src';
|
|
7
|
+
|
|
8
|
+
# Button
|
|
9
|
+
|
|
10
|
+
Buttons allow users to take actions and make choices with a single tap.
|
|
11
|
+
|
|
12
|
+
## Props
|
|
13
|
+
|
|
14
|
+
| Prop | Type | Required | Default | Description |
|
|
15
|
+
| ------------- | -------------------- | -------- | ---------- | --------------------- |
|
|
16
|
+
| `children` | `ReactNode` | - | - | Button content |
|
|
17
|
+
| `onClick` | `function` | - | - | Click handler |
|
|
18
|
+
| `intent` | `TReqoreIntent` | - | - | Semantic color intent |
|
|
19
|
+
| `icon` | `IReqoreIconName` | - | - | Left icon name |
|
|
20
|
+
| `rightIcon` | `IReqoreIconName` | - | - | Right icon name |
|
|
21
|
+
| `size` | `TSizes` | - | `'normal'` | Button size |
|
|
22
|
+
| `flat` | `boolean` | - | `true` | Flat styling |
|
|
23
|
+
| `minimal` | `boolean` | - | `false` | Minimal styling |
|
|
24
|
+
| `disabled` | `boolean` | - | `false` | Disabled state |
|
|
25
|
+
| `loading` | `boolean` | - | `false` | Loading state |
|
|
26
|
+
| `active` | `boolean` | - | `false` | Active state |
|
|
27
|
+
| `fluid` | `boolean` | - | `false` | Full width |
|
|
28
|
+
| `badge` | `number \| object` | - | - | Badge content |
|
|
29
|
+
| `tooltip` | `string \| object` | - | - | Tooltip content |
|
|
30
|
+
| `effect` | `IReqoreEffect` | - | - | Visual effects |
|
|
31
|
+
| `customTheme` | `IReqoreCustomTheme` | - | - | Custom theme |
|
|
32
|
+
| `className` | `string` | - | - | CSS class name |
|
|
33
|
+
|
|
34
|
+
## Basic Usage
|
|
35
|
+
|
|
36
|
+
<LiveDemo>
|
|
37
|
+
<ReqoreButton onClick={() => alert('Clicked!')}>Click Me</ReqoreButton>
|
|
38
|
+
</LiveDemo>
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { ReqoreButton } from '@qoretechnologies/reqore';
|
|
42
|
+
|
|
43
|
+
function Example() {
|
|
44
|
+
return <ReqoreButton onClick={() => alert('Clicked!')}>Click Me</ReqoreButton>;
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## With Intent
|
|
49
|
+
|
|
50
|
+
Use the `intent` prop to convey meaning:
|
|
51
|
+
|
|
52
|
+
<LiveDemo>
|
|
53
|
+
<ReqoreControlGroup>
|
|
54
|
+
<ReqoreButton intent='info'>Info</ReqoreButton>
|
|
55
|
+
<ReqoreButton intent='success'>Success</ReqoreButton>
|
|
56
|
+
<ReqoreButton intent='warning'>Warning</ReqoreButton>
|
|
57
|
+
<ReqoreButton intent='danger'>Danger</ReqoreButton>
|
|
58
|
+
</ReqoreControlGroup>
|
|
59
|
+
</LiveDemo>
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
import { ReqoreButton, ReqoreControlGroup } from '@qoretechnologies/reqore';
|
|
63
|
+
|
|
64
|
+
function IntentExample() {
|
|
65
|
+
return (
|
|
66
|
+
<ReqoreControlGroup>
|
|
67
|
+
<ReqoreButton intent='info'>Info</ReqoreButton>
|
|
68
|
+
<ReqoreButton intent='success'>Success</ReqoreButton>
|
|
69
|
+
<ReqoreButton intent='warning'>Warning</ReqoreButton>
|
|
70
|
+
<ReqoreButton intent='danger'>Danger</ReqoreButton>
|
|
71
|
+
</ReqoreControlGroup>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## With Icons
|
|
77
|
+
|
|
78
|
+
Add icons using the `icon` prop (uses Remix Icons):
|
|
79
|
+
|
|
80
|
+
<LiveDemo>
|
|
81
|
+
<ReqoreControlGroup>
|
|
82
|
+
<ReqoreButton icon='CheckLine'>Success</ReqoreButton>
|
|
83
|
+
<ReqoreButton icon='DeleteBinLine' rightIcon='ArrowRightLine'>
|
|
84
|
+
Delete and Next
|
|
85
|
+
</ReqoreButton>
|
|
86
|
+
<ReqoreButton icon='Settings4Line' />
|
|
87
|
+
</ReqoreControlGroup>
|
|
88
|
+
</LiveDemo>
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
<ReqoreButton icon="CheckLine">
|
|
92
|
+
Success
|
|
93
|
+
</ReqoreButton>
|
|
94
|
+
|
|
95
|
+
<ReqoreButton icon="DeleteBinLine" rightIcon="ArrowRightLine">
|
|
96
|
+
Delete and Next
|
|
97
|
+
</ReqoreButton>
|
|
98
|
+
|
|
99
|
+
{/* Icon only button */}
|
|
100
|
+
<ReqoreButton icon="Settings4Line" />
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Sizes
|
|
104
|
+
|
|
105
|
+
<LiveDemo center>
|
|
106
|
+
<ReqoreControlGroup>
|
|
107
|
+
<ReqoreButton size='micro'>Micro</ReqoreButton>
|
|
108
|
+
<ReqoreButton size='tiny'>Tiny</ReqoreButton>
|
|
109
|
+
<ReqoreButton size='small'>Small</ReqoreButton>
|
|
110
|
+
<ReqoreButton size='normal'>Normal</ReqoreButton>
|
|
111
|
+
<ReqoreButton size='big'>Big</ReqoreButton>
|
|
112
|
+
<ReqoreButton size='huge'>Huge</ReqoreButton>
|
|
113
|
+
<ReqoreButton size='massive'>Massive</ReqoreButton>
|
|
114
|
+
</ReqoreControlGroup>
|
|
115
|
+
</LiveDemo>
|
|
116
|
+
|
|
117
|
+
```tsx
|
|
118
|
+
<ReqoreControlGroup>
|
|
119
|
+
<ReqoreButton size='micro'>Micro</ReqoreButton>
|
|
120
|
+
<ReqoreButton size='tiny'>Tiny</ReqoreButton>
|
|
121
|
+
<ReqoreButton size='small'>Small</ReqoreButton>
|
|
122
|
+
<ReqoreButton size='normal'>Normal</ReqoreButton>
|
|
123
|
+
<ReqoreButton size='big'>Big</ReqoreButton>
|
|
124
|
+
<ReqoreButton size='huge'>Huge</ReqoreButton>
|
|
125
|
+
<ReqoreButton size='massive'>Massive</ReqoreButton>
|
|
126
|
+
</ReqoreControlGroup>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Variants
|
|
130
|
+
|
|
131
|
+
### Flat Buttons
|
|
132
|
+
|
|
133
|
+
<LiveDemo>
|
|
134
|
+
<ReqoreControlGroup>
|
|
135
|
+
<ReqoreButton flat>Flat Button</ReqoreButton>
|
|
136
|
+
<ReqoreButton flat={false}>Raised Button</ReqoreButton>
|
|
137
|
+
</ReqoreControlGroup>
|
|
138
|
+
</LiveDemo>
|
|
139
|
+
|
|
140
|
+
```tsx
|
|
141
|
+
<ReqoreButton flat>Flat Button</ReqoreButton>
|
|
142
|
+
<ReqoreButton flat={false}>Raised Button</ReqoreButton>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Minimal Buttons
|
|
146
|
+
|
|
147
|
+
<LiveDemo>
|
|
148
|
+
<ReqoreButton minimal>Minimal</ReqoreButton>
|
|
149
|
+
</LiveDemo>
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
<ReqoreButton minimal>Minimal</ReqoreButton>
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
### Badge
|
|
156
|
+
|
|
157
|
+
<LiveDemo>
|
|
158
|
+
<ReqoreControlGroup>
|
|
159
|
+
<ReqoreButton badge={5} icon='NotificationLine'>
|
|
160
|
+
Notifications
|
|
161
|
+
</ReqoreButton>
|
|
162
|
+
<ReqoreButton badge={{ label: 'New', intent: 'success' }}>Messages</ReqoreButton>
|
|
163
|
+
</ReqoreControlGroup>
|
|
164
|
+
</LiveDemo>
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
<ReqoreButton
|
|
168
|
+
badge={5}
|
|
169
|
+
icon="NotificationLine"
|
|
170
|
+
>
|
|
171
|
+
Notifications
|
|
172
|
+
</ReqoreButton>
|
|
173
|
+
|
|
174
|
+
<ReqoreButton
|
|
175
|
+
badge={{ label: 'New', intent: 'success' }}
|
|
176
|
+
>
|
|
177
|
+
Messages
|
|
178
|
+
</ReqoreButton>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## States
|
|
182
|
+
|
|
183
|
+
### Loading
|
|
184
|
+
|
|
185
|
+
<LiveDemo>
|
|
186
|
+
<ReqoreButton loading>Loading...</ReqoreButton>
|
|
187
|
+
</LiveDemo>
|
|
188
|
+
|
|
189
|
+
```tsx
|
|
190
|
+
<ReqoreButton loading>Loading...</ReqoreButton>
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### Disabled
|
|
194
|
+
|
|
195
|
+
<LiveDemo>
|
|
196
|
+
<ReqoreButton disabled>Disabled</ReqoreButton>
|
|
197
|
+
</LiveDemo>
|
|
198
|
+
|
|
199
|
+
```tsx
|
|
200
|
+
<ReqoreButton disabled>Disabled</ReqoreButton>
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
### Active
|
|
204
|
+
|
|
205
|
+
<LiveDemo>
|
|
206
|
+
<ReqoreButton active>Active State</ReqoreButton>
|
|
207
|
+
</LiveDemo>
|
|
208
|
+
|
|
209
|
+
```tsx
|
|
210
|
+
<ReqoreButton active>Active State</ReqoreButton>
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
## Full Width
|
|
214
|
+
|
|
215
|
+
<LiveDemo>
|
|
216
|
+
<ReqoreButton fluid>Full Width Button</ReqoreButton>
|
|
217
|
+
</LiveDemo>
|
|
218
|
+
|
|
219
|
+
```tsx
|
|
220
|
+
<ReqoreButton fluid>Full Width Button</ReqoreButton>
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
## With Tooltip
|
|
224
|
+
|
|
225
|
+
<LiveDemo>
|
|
226
|
+
<ReqoreControlGroup>
|
|
227
|
+
<ReqoreButton tooltip='This is helpful information' icon='QuestionLine'>
|
|
228
|
+
Help
|
|
229
|
+
</ReqoreButton>
|
|
230
|
+
<ReqoreButton
|
|
231
|
+
tooltip={{
|
|
232
|
+
content: 'Advanced tooltip',
|
|
233
|
+
intent: 'info',
|
|
234
|
+
placement: 'top',
|
|
235
|
+
}}
|
|
236
|
+
>
|
|
237
|
+
Hover Me
|
|
238
|
+
</ReqoreButton>
|
|
239
|
+
</ReqoreControlGroup>
|
|
240
|
+
</LiveDemo>
|
|
241
|
+
|
|
242
|
+
```tsx
|
|
243
|
+
<ReqoreButton
|
|
244
|
+
tooltip="This is helpful information"
|
|
245
|
+
icon="QuestionLine"
|
|
246
|
+
>
|
|
247
|
+
Help
|
|
248
|
+
</ReqoreButton>
|
|
249
|
+
|
|
250
|
+
<ReqoreButton
|
|
251
|
+
tooltip={{
|
|
252
|
+
content: 'Advanced tooltip',
|
|
253
|
+
intent: 'info',
|
|
254
|
+
placement: 'top',
|
|
255
|
+
}}
|
|
256
|
+
>
|
|
257
|
+
Hover Me
|
|
258
|
+
</ReqoreButton>
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
## Effects
|
|
262
|
+
|
|
263
|
+
Add visual effects for enhanced appearance:
|
|
264
|
+
|
|
265
|
+
<LiveDemo>
|
|
266
|
+
<ReqoreButton
|
|
267
|
+
effect={{
|
|
268
|
+
gradient: {
|
|
269
|
+
colors: {
|
|
270
|
+
0: '#3b82f6',
|
|
271
|
+
100: '#8b5cf6',
|
|
272
|
+
},
|
|
273
|
+
animate: 'hover',
|
|
274
|
+
},
|
|
275
|
+
uppercase: true,
|
|
276
|
+
weight: 'bold',
|
|
277
|
+
}}
|
|
278
|
+
>
|
|
279
|
+
Gradient Button
|
|
280
|
+
</ReqoreButton>
|
|
281
|
+
</LiveDemo>
|
|
282
|
+
|
|
283
|
+
```tsx
|
|
284
|
+
<ReqoreButton
|
|
285
|
+
effect={{
|
|
286
|
+
gradient: {
|
|
287
|
+
colors: {
|
|
288
|
+
0: '#3b82f6',
|
|
289
|
+
100: '#8b5cf6',
|
|
290
|
+
},
|
|
291
|
+
animate: 'hover',
|
|
292
|
+
},
|
|
293
|
+
uppercase: true,
|
|
294
|
+
weight: 'bold',
|
|
295
|
+
}}
|
|
296
|
+
>
|
|
297
|
+
Gradient Button
|
|
298
|
+
</ReqoreButton>
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
## As Link
|
|
302
|
+
|
|
303
|
+
Render button as a link:
|
|
304
|
+
|
|
305
|
+
```tsx
|
|
306
|
+
<ReqoreButton
|
|
307
|
+
as='a'
|
|
308
|
+
props={{
|
|
309
|
+
href: 'https://example.com',
|
|
310
|
+
target: '_blank',
|
|
311
|
+
}}
|
|
312
|
+
>
|
|
313
|
+
External Link
|
|
314
|
+
</ReqoreButton>
|
|
315
|
+
```
|
|
316
|
+
|
|
317
|
+
## Examples
|
|
318
|
+
|
|
319
|
+
### Action Buttons
|
|
320
|
+
|
|
321
|
+
<LiveDemo>
|
|
322
|
+
<ReqoreControlGroup>
|
|
323
|
+
<ReqoreButton intent='success' icon='CheckLine'>
|
|
324
|
+
Save
|
|
325
|
+
</ReqoreButton>
|
|
326
|
+
<ReqoreButton intent='danger' icon='CloseLine'>
|
|
327
|
+
Cancel
|
|
328
|
+
</ReqoreButton>
|
|
329
|
+
</ReqoreControlGroup>
|
|
330
|
+
</LiveDemo>
|
|
331
|
+
|
|
332
|
+
```tsx
|
|
333
|
+
function ActionButtons() {
|
|
334
|
+
return (
|
|
335
|
+
<ReqoreControlGroup>
|
|
336
|
+
<ReqoreButton intent='success' icon='CheckLine'>
|
|
337
|
+
Save
|
|
338
|
+
</ReqoreButton>
|
|
339
|
+
<ReqoreButton intent='danger' icon='CloseLine'>
|
|
340
|
+
Cancel
|
|
341
|
+
</ReqoreButton>
|
|
342
|
+
</ReqoreControlGroup>
|
|
343
|
+
);
|
|
344
|
+
}
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
### Icon Button Group
|
|
348
|
+
|
|
349
|
+
<LiveDemo>
|
|
350
|
+
<ReqoreControlGroup>
|
|
351
|
+
<ReqoreButton icon='DeleteBinLine' tooltip='Delete' />
|
|
352
|
+
<ReqoreButton icon='EditLine' tooltip='Edit' />
|
|
353
|
+
<ReqoreButton icon='ShareLine' tooltip='Share' />
|
|
354
|
+
</ReqoreControlGroup>
|
|
355
|
+
</LiveDemo>
|
|
356
|
+
|
|
357
|
+
```tsx
|
|
358
|
+
function IconButtons() {
|
|
359
|
+
return (
|
|
360
|
+
<ReqoreControlGroup>
|
|
361
|
+
<ReqoreButton icon='DeleteBinLine' tooltip='Delete' />
|
|
362
|
+
<ReqoreButton icon='EditLine' tooltip='Edit' />
|
|
363
|
+
<ReqoreButton icon='ShareLine' tooltip='Share' />
|
|
364
|
+
</ReqoreControlGroup>
|
|
365
|
+
);
|
|
366
|
+
}
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
### Loading Button
|
|
370
|
+
|
|
371
|
+
<LiveDemo>
|
|
372
|
+
<ReqoreButton loading>Loading...</ReqoreButton>
|
|
373
|
+
</LiveDemo>
|
|
374
|
+
|
|
375
|
+
```tsx
|
|
376
|
+
function LoadingButton() {
|
|
377
|
+
const [loading, setLoading] = useState(false);
|
|
378
|
+
|
|
379
|
+
const handleClick = async () => {
|
|
380
|
+
setLoading(true);
|
|
381
|
+
await someAsyncOperation();
|
|
382
|
+
setLoading(false);
|
|
383
|
+
};
|
|
384
|
+
|
|
385
|
+
return (
|
|
386
|
+
<ReqoreButton loading={loading} onClick={handleClick}>
|
|
387
|
+
Submit
|
|
388
|
+
</ReqoreButton>
|
|
389
|
+
);
|
|
390
|
+
}
|
|
391
|
+
```
|