Files
twenty_crm/packages/twenty-website/src/content/twenty-ui/input/toggle.mdx
gitstart-app[bot] 430644448a Migrate to twenty-ui - navigation/link (#7837)
This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7535](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7535).

 --- 

### Description.  

Migrate link components to `twenty-ui` \
\
Fixes #7535

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
2024-10-22 17:36:26 +02:00

36 lines
966 B
Plaintext

---
title: Toggle
icon: TbToggleRight
image: /images/user-guide/table-views/table.png
---
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { Toggle } from "twenty-ui";
export const MyComponent = () => {
return (
<Toggle
value = {true}
onChange = {()=>console.log('On Change event')}
color="green"
toggleSize = "medium"
/>
);
};`} />
</ArticleTab>
<ArticleTab>
<ArticlePropsTable options={[
['value', 'boolean', 'The current state of the toggle', '`false`'],
['onChange', 'function', 'Callback function triggered when the toggle state changes', ''],
['color', 'string', 'Color of the toggle when it\'s in the "on" state. If not provided, it uses the theme\'s blue color', ''],
['toggleSize', 'string', 'Size of the toggle, affecting both height and weight. Has two options: `small` and `medium`', 'medium']
]} />
</ArticleTab>
</ArticleTabs>
<ArticleEditContent></ArticleEditContent>