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>
149 lines
4.6 KiB
Plaintext
149 lines
4.6 KiB
Plaintext
---
|
|
title: crwdns61724:0crwdne61724:0
|
|
image: crwdns61732:0crwdne61732:0
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/github/github-header.png" alt="Header" />
|
|
</Frame>
|
|
|
|
crwdns61736:0crwdne61736:0
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { Chip } from 'twenty-ui/components';
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Chip
|
|
size="large"
|
|
label="Clickable Chip"
|
|
clickable={true}
|
|
variant="highlighted"
|
|
accent="text-primary"
|
|
leftComponent
|
|
rightComponent
|
|
maxWidth="200px"
|
|
className
|
|
/>
|
|
);
|
|
};
|
|
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| crwdns61740:0crwdne61740:0 | crwdns61744:0crwdne61744:0 | crwdns61748:0crwdne61748:0 |
|
|
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
| crwdns61752:0crwdne61752:0 | crwdns61754:0crwdne61754:0 | crwdns61756:0crwdne61756:0 |
|
|
| crwdns61758:0crwdne61758:0 | crwdns61760:0crwdne61760:0 | crwdns61762:0crwdne61762:0 |
|
|
| crwdns61764:0crwdne61764:0 | crwdns61766:0crwdne61766:0 | crwdns61768:0crwdne61768:0 |
|
|
| crwdns61770:0crwdne61770:0 | crwdns61772:0crwdne61772:0 | crwdns61774:0crwdne61774:0 |
|
|
| crwdns61776:0crwdne61776:0 | crwdns61778:0crwdne61778:0 | crwdns61780:0crwdne61780:0 crwdns61782:0crwdne61782:0 |
|
|
| crwdns61784:0crwdne61784:0 | crwdns61786:0crwdne61786:0 | crwdns61788:0crwdne61788:0 crwdns61790:0crwdne61790:0 |
|
|
| crwdns61792:0crwdne61792:0 | crwdns61794:0crwdne61794:0 | crwdns61796:0crwdne61796:0 crwdns61798:0crwdne61798:0 |
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## crwdns61800:0crwdne61800:0
|
|
|
|
### crwdns61802:0crwdne61802:0
|
|
|
|
```jsx
|
|
import { Chip } from 'twenty-ui/components';
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Chip
|
|
size="large"
|
|
label="Transparent Disabled Chip"
|
|
clickable={false}
|
|
variant="rounded"
|
|
accent="text-secondary"
|
|
leftComponent
|
|
rightComponent
|
|
maxWidth="200px"
|
|
className
|
|
/>
|
|
);
|
|
};
|
|
|
|
```
|
|
|
|
crwdns61804:0crwdne61804:0
|
|
|
|
### crwdns61806:0crwdne61806:0
|
|
|
|
```jsx
|
|
import { Chip } from "twenty-ui/components";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Chip
|
|
size="large"
|
|
label="Disabled chip that triggers a tooltip when overflowing."
|
|
clickable={false}
|
|
variant="regular"
|
|
accent="text-primary"
|
|
leftComponent
|
|
rightComponent
|
|
maxWidth="200px"
|
|
className
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
## crwdns61808:0crwdne61808:0
|
|
|
|
crwdns61810:0crwdne61810:0
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { BrowserRouter as Router } from 'react-router-dom';
|
|
import { IconTwentyStar } from 'twenty-ui/display';
|
|
import { Chip } from 'twenty-ui/components';
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Router>
|
|
<Chip
|
|
linkToEntity="/entity-link"
|
|
entityId="entityTest"
|
|
name="Entity name"
|
|
pictureUrl=""
|
|
avatarType="rounded"
|
|
variant="regular"
|
|
LeftIcon={IconTwentyStar}
|
|
/>
|
|
</Router>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| crwdns61812:0crwdne61812:0 | crwdns61814:0crwdne61814:0 | crwdns61816:0crwdne61816:0 |
|
|
| ---------------------------------------------------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
| crwdns61818:0crwdne61818:0 | crwdns61820:0crwdne61820:0 | crwdns61822:0crwdne61822:0 |
|
|
| crwdns61824:0crwdne61824:0 | crwdns61826:0crwdne61826:0 | crwdns61828:0crwdne61828:0 |
|
|
| crwdns61830:0crwdne61830:0 | crwdns61832:0crwdne61832:0 | crwdns61834:0crwdne61834:0 |
|
|
| crwdns61836:0crwdne61836:0 | crwdns61838:0crwdne61838:0 | crwdns61840:0crwdne61840:0 |
|
|
| crwdns61842:0crwdne61842:0 | crwdns61844:0crwdne61844:0 | crwdns61846:0crwdne61846:0 crwdns61848:0crwdne61848:0 |
|
|
| crwdns61850:0crwdne61850:0 | crwdns61852:0crwdne61852:0 | crwdns61854:0crwdne61854:0 crwdns61856:0crwdne61856:0 |
|
|
| crwdns61858:0crwdne61858:0 | crwdns61860:0crwdne61860:0 | crwdns61862:0crwdne61862:0 crwdns61864:0crwdne61864:0 |
|
|
|
|
</Tab>
|
|
</Tabs>
|