github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
441 lines
18 KiB
Plaintext
441 lines
18 KiB
Plaintext
---
|
|
title: crwdns62996:0crwdne62996:0
|
|
image: crwdns62998:0crwdne62998:0
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="Header" />
|
|
</Frame>
|
|
|
|
crwdns63000:0crwdne63000:0
|
|
|
|
## crwdns63002:0crwdne63002:0
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { Button } from "@/ui/input/button/components/Button";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="Title"
|
|
fullWidth={false}
|
|
variant="primary"
|
|
size="medium"
|
|
position="standalone"
|
|
accent="default"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| crwdns63004:0crwdne63004:0 | crwdns63006:0crwdne63006:0 | crwdns63008:0crwdne63008:0 |
|
|
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
| crwdns63010:0crwdne63010:0 | crwdns63012:0crwdne63012:0 | crwdns63014:0crwdne63014:0 |
|
|
| crwdns63016:0crwdne63016:0 | crwdns63018:0crwdne63018:0 | crwdns63020:0crwdne63020:0 |
|
|
| crwdns63022:0crwdne63022:0 | crwdns63024:0crwdne63024:0 | crwdns63026:0crwdne63026:0 |
|
|
| crwdns63028:0crwdne63028:0 | crwdns63030:0crwdne63030:0 | crwdns63032:0crwdne63032:0 |
|
|
| crwdns63034:0crwdne63034:0 | crwdns63036:0crwdne63036:0 | crwdns63038:0crwdne63038:0 crwdns63040:0crwdne63040:0 |
|
|
| crwdns63042:0crwdne63042:0 | crwdns63044:0crwdne63044:0 | crwdns63046:0crwdne63046:0 crwdns63048:0crwdne63048:0 |
|
|
| crwdns63050:0crwdne63050:0 | crwdns63052:0crwdne63052:0 | crwdns63054:0crwdne63054:0 crwdns63056:0crwdne63056:0 |
|
|
| crwdns63058:0crwdne63058:0 | crwdns63060:0crwdne63060:0 | crwdns63062:0crwdne63062:0 crwdns63064:0crwdne63064:0 |
|
|
| crwdns63066:0crwdne63066:0 | crwdns63068:0crwdne63068:0 | crwdns63070:0crwdne63070:0 |
|
|
| crwdns63072:0crwdne63072:0 | crwdns63074:0crwdne63074:0 | crwdns63076:0crwdne63076:0 |
|
|
| crwdns63078:0crwdne63078:0 | crwdns63080:0crwdne63080:0 | crwdns63082:0crwdne63082:0 |
|
|
| crwdns63084:0crwdne63084:0 | crwdns63086:0crwdne63086:0 | crwdns63088:0crwdne63088:0 |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## crwdns63090:0crwdne63090:0
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">crwdns63092:0{ Button }crwdnd63092:0{ ButtonGroup }crwdne63092:0
|
|
|
|
crwdns63094:0{null}crwdnd63094:0{false}crwdnd63094:0{false}crwdnd63094:0{false}crwdnd63094:0{false}crwdnd63094:0{null}crwdnd63094:0{false}crwdnd63094:0{false}crwdnd63094:0{false}crwdnd63094:0{false}crwdnd63094:0{null}crwdnd63094:0{false}crwdnd63094:0{false}crwdnd63094:0{false}crwdnd63094:0{false}crwdne63094:0
|
|
|
|
````
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
|
|
| Props | Type | Description |
|
|
|-------|------|-------------|
|
|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
|
|
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
|
|
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
|
|
| className | string | Optional class name for additional styling |
|
|
| children | ReactNode | An array of React elements representing the individual buttons within the group |
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
|
|
## Floating Button
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingButton
|
|
className
|
|
Icon={IconSearch}
|
|
title="Title"
|
|
size="medium"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={true}
|
|
/>
|
|
);
|
|
};
|
|
````
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| crwdns63096:0crwdne63096:0 | crwdns63098:0crwdne63098:0 | crwdns63100:0crwdne63100:0 |
|
|
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
| crwdns63102:0crwdne63102:0 | crwdns63104:0crwdne63104:0 | crwdns63106:0crwdne63106:0 |
|
|
| crwdns63108:0crwdne63108:0 | crwdns63110:0crwdne63110:0 | crwdns63112:0crwdne63112:0 |
|
|
| crwdns63114:0crwdne63114:0 | crwdns63116:0crwdne63116:0 | crwdns63118:0crwdne63118:0 |
|
|
| crwdns63120:0crwdne63120:0 | crwdns63122:0crwdne63122:0 | crwdns63124:0crwdne63124:0 crwdns63126:0crwdne63126:0 |
|
|
| crwdns63128:0crwdne63128:0 | crwdns63130:0crwdne63130:0 | crwdns63132:0crwdne63132:0 crwdns63134:0crwdne63134:0 |
|
|
| crwdns63136:0crwdne63136:0 | crwdns63138:0crwdne63138:0 | crwdns63140:0crwdne63140:0 |
|
|
| crwdns63142:0crwdne63142:0 | crwdns63144:0crwdne63144:0 | crwdns63146:0crwdne63146:0 |
|
|
| crwdns63148:0crwdne63148:0 | crwdns63150:0crwdne63150:0 | crwdns63152:0crwdne63152:0 |
|
|
| crwdns63154:0crwdne63154:0 | crwdns63156:0crwdne63156:0 | crwdns63158:0crwdne63158:0 |
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## crwdns63160:0crwdne63160:0
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
|
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
|
|
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingButtonGroup size="small">
|
|
<FloatingButton
|
|
className
|
|
Icon={IconClipboardText}
|
|
title
|
|
size="small"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={true}
|
|
/>
|
|
<FloatingButton
|
|
className
|
|
Icon={IconCheckbox}
|
|
title
|
|
size="small"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
/>
|
|
</FloatingButtonGroup>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| crwdns63162:0crwdne63162:0 | crwdns63164:0crwdne63164:0 | crwdns63166:0crwdne63166:0 | crwdns63168:0crwdne63168:0 |
|
|
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
|
|
| crwdns63170:0crwdne63170:0 | crwdns63172:0crwdne63172:0 | crwdns63174:0crwdne63174:0 crwdns63176:0crwdne63176:0 | crwdns63178:0crwdne63178:0 |
|
|
| crwdns63180:0crwdne63180:0 | crwdns63182:0crwdne63182:0 | crwdns63184:0crwdne63184:0 | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## crwdns63186:0crwdne63186:0
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingIconButton
|
|
className
|
|
Icon={IconSearch}
|
|
size="small"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("click")}
|
|
isActive={true}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| crwdns63188:0crwdne63188:0 | crwdns63190:0crwdne63190:0 | crwdns63192:0crwdne63192:0 |
|
|
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
| crwdns63194:0crwdne63194:0 | crwdns63196:0crwdne63196:0 | crwdns63198:0crwdne63198:0 |
|
|
| crwdns63200:0crwdne63200:0 | crwdns63202:0crwdne63202:0 | crwdns63204:0crwdne63204:0 |
|
|
| crwdns63206:0crwdne63206:0 | crwdns63208:0crwdne63208:0 | crwdns63210:0crwdne63210:0 crwdns63212:0crwdne63212:0 |
|
|
| crwdns63214:0crwdne63214:0 | crwdns63216:0crwdne63216:0 | crwdns63218:0crwdne63218:0 crwdns63220:0crwdne63220:0 |
|
|
| crwdns63222:0crwdne63222:0 | crwdns63224:0crwdne63224:0 | crwdns63226:0crwdne63226:0 |
|
|
| crwdns63228:0crwdne63228:0 | crwdns63230:0crwdne63230:0 | crwdns63232:0crwdne63232:0 |
|
|
| crwdns63234:0crwdne63234:0 | crwdns63236:0crwdne63236:0 | crwdns63238:0crwdne63238:0 |
|
|
| crwdns63240:0crwdne63240:0 | crwdns63242:0crwdne63242:0 | crwdns63244:0crwdne63244:0 |
|
|
| crwdns63246:0crwdne63246:0 | crwdns63248:0crwdne63248:0 | crwdns63250:0crwdne63250:0 |
|
|
| crwdns63252:0crwdne63252:0 | crwdns63254:0crwdne63254:0 | crwdns63256:0crwdne63256:0 |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## crwdns63258:0crwdne63258:0
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
|
|
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
const iconButtons = [
|
|
{
|
|
Icon: IconClipboardText,
|
|
onClick: () => console.log("Button 1 clicked"),
|
|
isActive: true,
|
|
},
|
|
{
|
|
Icon: IconCheckbox,
|
|
onClick: () => console.log("Button 2 clicked"),
|
|
isActive: true,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<FloatingIconButtonGroup
|
|
className
|
|
size="small"
|
|
iconButtons={iconButtons} />
|
|
);
|
|
};
|
|
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| crwdns63262:0crwdne63262:0 | crwdns63264:0crwdne63264:0 | crwdns63266:0crwdne63266:0 |
|
|
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
| crwdns63268:0crwdne63268:0 | crwdns63270:0crwdne63270:0 | crwdns63272:0crwdne63272:0 |
|
|
| crwdns63274:0crwdne63274:0 | crwdns63276:0crwdne63276:0 | crwdns63278:0crwdne63278:0 crwdns63280:0crwdne63280:0 |
|
|
| crwdns63284:0crwdne63284:0 | crwdns63286:0crwdne63286:0 | crwdns63288:0crwdne63288:0 crwdns63292:0crwdne63292:0 |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## crwdns63294:0crwdne63294:0
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { LightButton } from "@/ui/input/button/components/LightButton";
|
|
|
|
export const MyComponent = () => {
|
|
return <LightButton
|
|
className
|
|
icon={null}
|
|
title="Title"
|
|
accent="secondary"
|
|
active={false}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={()=>console.log('click')}
|
|
/>;
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| crwdns63298:0crwdne63298:0 | crwdns63300:0crwdne63300:0 | crwdns63304:0crwdne63304:0 |
|
|
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
| crwdns63306:0crwdne63306:0 | crwdns63310:0crwdne63310:0 | crwdns63312:0crwdne63312:0 |
|
|
| crwdns63316:0crwdne63316:0 | crwdns63318:0crwdne63318:0 | crwdns63322:0crwdne63322:0 |
|
|
| crwdns63326:0crwdne63326:0 | crwdns63328:0crwdne63328:0 | crwdns63332:0crwdne63332:0 |
|
|
| crwdns63334:0crwdne63334:0 | crwdns63336:0crwdne63336:0 | crwdns63340:0crwdne63340:0 crwdns63342:0crwdne63342:0 |
|
|
| crwdns63346:0crwdne63346:0 | crwdns63348:0crwdne63348:0 | crwdns63350:0crwdne63350:0 |
|
|
| crwdns63354:0crwdne63354:0 | crwdns63356:0crwdne63356:0 | crwdns63358:0crwdne63358:0 |
|
|
| crwdns63360:0crwdne63360:0 | crwdns63362:0crwdne63362:0 | crwdns63364:0crwdne63364:0 |
|
|
| crwdns63366:0crwdne63366:0 | crwdns63368:0crwdne63368:0 | crwdns63370:0crwdne63370:0 |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## crwdns63372:0crwdne63372:0
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<LightIconButton
|
|
className
|
|
testId="test1"
|
|
Icon={IconSearch}
|
|
title="Title"
|
|
size="small"
|
|
accent="secondary"
|
|
active={true}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| crwdns63374:0crwdne63374:0 | crwdns63376:0crwdne63376:0 | crwdns63378:0crwdne63378:0 |
|
|
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
| crwdns63380:0crwdne63380:0 | crwdns63382:0crwdne63382:0 | crwdns63384:0crwdne63384:0 |
|
|
| crwdns63386:0crwdne63386:0 | crwdns63388:0crwdne63388:0 | crwdns63390:0crwdne63390:0 |
|
|
| crwdns63392:0crwdne63392:0 | crwdns63394:0crwdne63394:0 | crwdns63396:0crwdne63396:0 |
|
|
| crwdns63398:0crwdne63398:0 | crwdns63400:0crwdne63400:0 | crwdns63402:0crwdne63402:0 |
|
|
| crwdns63404:0crwdne63404:0 | crwdns63406:0crwdne63406:0 | crwdns63408:0crwdne63408:0 crwdns63410:0crwdne63410:0 |
|
|
| crwdns63412:0crwdne63412:0 | crwdns63414:0crwdne63414:0 | crwdns63416:0crwdne63416:0 crwdns63418:0crwdne63418:0 |
|
|
| crwdns63420:0crwdne63420:0 | crwdns63422:0crwdne63422:0 | crwdns63424:0crwdne63424:0 |
|
|
| crwdns63426:0crwdne63426:0 | crwdns63428:0crwdne63428:0 | crwdns63430:0crwdne63430:0 |
|
|
| crwdns63432:0crwdne63432:0 | crwdns63434:0crwdne63434:0 | crwdns63436:0crwdne63436:0 |
|
|
| crwdns63438:0crwdne63438:0 | crwdns63440:0crwdne63440:0 | crwdns63442:0crwdne63442:0 |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## crwdns63444:0crwdne63444:0
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { MainButton } from "@/ui/input/button/components/MainButton";
|
|
import { IconCheckbox } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<MainButton
|
|
title="Checkbox"
|
|
fullWidth={false}
|
|
variant="primary"
|
|
soon={false}
|
|
Icon={IconCheckbox}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| crwdns63446:0crwdne63446:0 | crwdns63448:0crwdne63448:0 | crwdns63450:0crwdne63450:0 |
|
|
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
| crwdns63452:0crwdne63452:0 | crwdns63454:0crwdne63454:0 | crwdns63456:0crwdne63456:0 |
|
|
| crwdns63458:0crwdne63458:0 | crwdns63460:0crwdne63460:0 | crwdns63462:0crwdne63462:0 |
|
|
| crwdns63464:0crwdne63464:0 | crwdns63466:0crwdne63466:0 | crwdns63468:0crwdne63468:0 crwdns63470:0crwdne63470:0 |
|
|
| crwdns63472:0crwdne63472:0 | crwdns63474:0crwdne63474:0 | crwdns63476:0crwdne63476:0 |
|
|
| crwdns63478:0crwdne63478:0 | crwdns63480:0crwdne63480:0 | crwdns63482:0crwdne63482:0 |
|
|
| crwdns63484:0crwdne63484:0 | crwdns63486:0crwdne63486:0 | crwdns63488:0crwdne63488:0 |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## crwdns63490:0crwdne63490:0
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<RoundedIconButton
|
|
Icon={IconSearch}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| crwdns63492:0crwdne63492:0 | crwdns63494:0crwdne63494:0 | crwdns63496:0crwdne63496:0 |
|
|
| ---------------------------------------------------------- | ---------------------------------------------------------- | ---------------------------------------------------------- |
|
|
| crwdns63498:0crwdne63498:0 | crwdns63500:0crwdne63500:0 | |
|
|
| crwdns63502:0crwdne63502:0 | crwdns63504:0crwdne63504:0 | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|