Figblocks

https://figblocks.mohanvadivel.com
Admin
Figblocks is an open-source UI component library for building Figma plugins with Svelte.
Tokens:8,975
Snippets:95
Trust Score:4.3
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install Figblocks UI Component Library

Source: https://figblocks.mohanvadivel.com/index

Install the 'figblocks' package into your project using npm. This is the primary step to begin using the UI component library.

```bash
npm i figblocks
```

--------------------------------

### Import and Use Icon Component (JavaScript)

Source: https://figblocks.mohanvadivel.com/components/icon

Demonstrates how to import the Icon component and an example SVG icon from 'figblocks' and 'figblocks/icons' respectively. It shows how to render the icon using the 'iconSvg' prop.

```javascript
<script>
	import { Icon } from 'figblocks';
	import { IconCode } from 'figblocks/icons';
</script>

<Icon iconSvg={IconCode} />
```

--------------------------------

### Clone Figma Plugin Svelte Template

Source: https://figblocks.mohanvadivel.com/index

Clone the provided Svelte-based template repository for Figma plugins and install its dependencies. This is useful if you don't have an existing development setup.

```bash
git clone https://github.com/imohanvadivel/figma-template-svelte.git
cd figma-template-svelte
npm i
```

--------------------------------

### Usage Example: Button with Icon in Svelte

Source: https://figblocks.mohanvadivel.com/index

Demonstrates how to import and use the 'Button' and 'Icon' components from 'figblocks' in a Svelte component. It includes importing a specific icon and placing it within the button.

```svelte
<script>
	import { Button, Icon } from 'figblocks';
	import { IconArrowRight } from 'figblocks/icons';
</script>

<Button>
	Get Started <Icon slot="right-icon" iconSvg={IconArrowRight} />
</Button>
```

--------------------------------

### Import and Use SectionTitle Component (JavaScript)

Source: https://figblocks.mohanvadivel.com/components/section-title

Demonstrates how to import the SectionTitle component from the 'figblocks' library and use it within a script tag. This is the basic setup for rendering a section title.

```javascript
<script>
	import { SectionTitle } from 'figblocks';
</script>

<SectionTitle>Position</SectionTitle>
```

--------------------------------

### Disabled Radio Button Example with Svelte

Source: https://figblocks.mohanvadivel.com/components/radio

Illustrates how to disable individual radio buttons by passing the 'disabled' prop. This prevents user interaction with the specific radio option.

```html
<Radio disabled>Some Value</Radio>
```

--------------------------------

### Basic Textarea Usage with Figblocks

Source: https://figblocks.mohanvadivel.com/components/textarea

Demonstrates the basic usage of the Textarea component from the 'figBlocks' library. This snippet shows how to render a simple textarea with a placeholder.

```html
<Textarea placeholder="some value here" />
```

--------------------------------

### Basic TextInput Usage in Svelte

Source: https://figblocks.mohanvadivel.com/components/text-input

Demonstrates the basic implementation of the TextInput component from the 'figblocks' library in a Svelte application. It shows how to import the component and render it with an initial value.

```svelte
<script>
	import { TextInput } from 'figblocks';
</script>

<TextInput value="42" />
```

--------------------------------

### Import and Use Figblocks Switch

Source: https://figblocks.mohanvadivel.com/components/switch

Demonstrates how to import and use the basic Switch component from the 'figblocks' library in a Svelte application. This is the foundational step for utilizing the switch functionality.

```html
<script>
	import { Switch } from 'figblocks';
</script>

<Switch />
```

--------------------------------

### Configuring Min, Max, and Step for Number Input (Svelte)

Source: https://figblocks.mohanvadivel.com/components/number-input

Shows how to configure the minimum value, maximum value, and increment step for the NumberInput component using the 'min', 'max', and 'step' props. This allows for controlled numerical input within a specified range, enhancing user experience and data validation.

```svelte
<script>
	import { NumberInput, Label } from 'figblocks';
</script>

<div>
	<Label for="xpos">Position</Label>
	<NumberInput min={10} max={100} step={10} id="xpos" placeholder="Enter the x position" />
</div>
```

--------------------------------

### Svelte: Basic Option Button Usage with Icons

Source: https://figblocks.mohanvadivel.com/components/option-button

Demonstrates how to import and use the OptionButton component in Svelte, specifying distinct icons for connected and disconnected states using SVG components.

```svelte
<script>
	import { OptionButton } from 'figblocks';
	import { IconLinkBroken, IconLinkConnected } from 'figblocks/icons';
</script>

<OptionButton iconSvg={IconLinkConnected} inactiveIconSVG={IconLinkBroken} />
```

--------------------------------

### Import and Use Figblocks Select Component (Svelte)

Source: https://figblocks.mohanvadivel.com/components/select

Demonstrates the basic usage of the Select component by importing it from 'figblocks' and passing an array of menu items. The menuItems array defines the options available in the select dropdown. Each item has a label, value, and a selected state.

```html
<script>
	import { Select } from 'figblocks';

	let menuItems = [
		{ label: 'Apple', value: 'apple', selected: false },
		{ label: 'Mango', value: 'mango', selected: false },
		{ label: 'Banana', value: 'banana', selected: false }
	];
</script>

<Select bind:menuItems />

```

--------------------------------

### Import and Use Figblocks Text Component

Source: https://figblocks.mohanvadivel.com/components/text

Demonstrates how to import the Text component from 'figblocks' and use it to render basic text content. No external dependencies are required beyond the figblocks library.

```html
<script>
	import { Text } from 'figblocks';
</script>

<Text>Hamburger</Text>
```

--------------------------------

### Basic Number Input Usage (Svelte)

Source: https://figblocks.mohanvadivel.com/components/number-input

Demonstrates the basic import and usage of the NumberInput component from the 'figblocks' library. This is the foundational step for incorporating numerical input fields into a Svelte application.

```svelte
<script>
	import { NumberInput } from 'figblocks';
</script>

<NumberInput value="42" />
```

--------------------------------

### Figblocks Build Scripts for Figma Plugins

Source: https://figblocks.mohanvadivel.com/index

Automate the build process for your Figma plugin's UI and code files. These scripts monitor changes and compile assets for development and production.

```bash
# Monitors changes in the UI files and rebuilds them automatically when changes happen
watch:ui

# Compiles the UI files for production use
build:ui

# Monitors changes in the Figma code file and rebuilds it automatically when changes happen
watch:code

# Compiles the Figma code file for production use
build:code
```

--------------------------------

### Figblocks Tabs Component Usage (HTML)

Source: https://figblocks.mohanvadivel.com/components/tabs

Demonstrates how to use the Figblocks Tabs component by importing Tab and TabItem components. The 'open' prop can be used to set a default open tab.

```html
<Tabs>
	<TabItem title="Design">First tab</TabItem>
	<TabItem title="Code" open>Second tab</TabItem>
</Tabs>
```

--------------------------------

### Basic Button Usage with Figblocks

Source: https://figblocks.mohanvadivel.com/components/button

Demonstrates how to import and use the basic Button component from the figblocks library. It shows a simple button with a text label. This is the foundational step for using any button functionality.

```html
<script>
	import { Button } from 'figblocks';
</script>

<Button>Label</Button>
```

--------------------------------

### Basic Radio Group Usage with Svelte

Source: https://figblocks.mohanvadivel.com/components/radio

Demonstrates how to import and use the Radio and RadioGroup components from 'figblocks' to create a basic selection list. The 'bind:group' directive manages the selected value, and the 'name' prop is recommended for the RadioGroup.

```html
<script>
	import { Radio, RadioGroup } from 'figblocks';
	let fruit = 'apple';
</script>

<RadioGroup bind:group={fruit} name="fruit">
	<Radio value="apple">Apple</Radio>
	<Radio value="orange">Orange</Radio>
</RadioGroup>
```

--------------------------------

### Import Global Styles in Svelte

Source: https://figblocks.mohanvadivel.com/index

Import the global styles provided by the 'figblocks' library into your 'main.ts' file. This step ensures that all components have consistent styling.

```typescript
import "figblocks/globalStyles";
```

--------------------------------

### Render Figblocks IconButton with Icon

Source: https://figblocks.mohanvadivel.com/components/icon-button

Demonstrates how to import and use the IconButton component from 'figblocks', rendering an icon using the 'iconSvg' prop. This snippet shows basic usage and active state.

```svelte
<script>
	import { IconButton } from 'figblocks';
	import { IconStyles } from 'figblocks/icons';
</script>

<IconButton iconSvg={IconStyles} />
<IconButton iconSvg={IconStyles} active />
```

--------------------------------

### Basic Disclosure Usage with Svelte

Source: https://figblocks.mohanvadivel.com/components/disclosure

Demonstrates the fundamental usage of the Disclosure and DisclosureItem components in Svelte. It shows how to import them and structure them to create a simple disclosure widget with a default open item.

```html
<script>
	import { Disclosure, DisclosureItem } from 'figblocks';
</script>

<Disclosure>
	<DisclosureItem title="First" open>First item</DisclosureItem>
	<DisclosureItem title="Second">Second item</DisclosureItem>
</Disclosure>
```

--------------------------------

### Render Pre-defined SVG Icons (JavaScript)

Source: https://figblocks.mohanvadivel.com/components/icon

Illustrates the usage of the Icon component with various pre-defined SVG icons imported from 'figblocks/icons'. Each icon is passed to the 'iconSvg' prop.

```javascript
<Icon iconSvg={IconArrowLeft} />
<Icon iconSvg={IconArrowTop} />
<Icon iconSvg={IconArrowRight} />
<Icon iconSvg={IconArrowBottom} />
<Icon iconSvg={IconKey} />
<Icon iconSvg={IconCode} />
<Icon iconSvg={IconRotate} />
```

--------------------------------

### Render Text Icons (JavaScript)

Source: https://figblocks.mohanvadivel.com/components/icon

Demonstrates how to use the Icon component to render text-based icons by passing a text glyph to the 'iconText' prop.

```javascript
<Icon iconText="X" />
<Icon iconText="→" />
<Icon iconText="Y" />
```

--------------------------------

### Resizable Textarea Option with Figblocks

Source: https://figblocks.mohanvadivel.com/components/textarea

Explains how to enable user resizing of the Textarea component by setting the `resize` prop to true. This allows users to adjust the textarea's height dynamically.

```html
<Textarea resize value="A quick brow fox jumps over a lazy dog" />
```

--------------------------------

### Svelte: Option Button Active State

Source: https://figblocks.mohanvadivel.com/components/option-button

Shows how to activate the OptionButton component by passing the 'active' prop. This visually indicates the selected or active state of the toggle.

```svelte
<script>
	import { OptionButton } from 'figblocks';
	import { IconLinkBroken, IconLinkConnected } from 'figblocks/icons';
</script>

<OptionButton active iconSvg={IconLinkConnected} inactiveIconSVG={IconLinkBroken} />
```

--------------------------------

### Figblocks Button with Left and Right Icons

Source: https://figblocks.mohanvadivel.com/components/button

Explains how to add icons to the Button component using the `Icon` component and designated slots (`left-icon`, `right-icon`). This enhances button usability and visual appeal by providing contextual cues. The component automatically handles optical padding for icons placed in slots.

```html
<script>
	import { Button, Icon } from 'figblocks';
	import { IconArrowRight } from 'figblocks/icons';
</script>

<Button>
	<Icon slot="left-icon" iconSvg={IconArrowRight} /> Get Started
</Button>

<Button variant="secondary">
	Get Started
	<Icon slot="right-icon" iconSvg={IconArrowRight} />
</Button>
```

--------------------------------

### Adding Icons to Number Input (Svelte)

Source: https://figblocks.mohanvadivel.com/components/number-input

Explains how to add icons to the NumberInput component using the 'iconSvg' prop. This enhances the visual appeal and usability of the input field by providing context or action cues. Refer to the Icon component documentation for more details on icon usage.

```svelte
<script>
	import { NumberInput, Icon } from 'figblocks';
	import { IconCode } from 'figblocks/icons';
</script>

<NumberInput iconSvg={IconCode} placeholder="Enter the value here" />
```

--------------------------------

### Enable Spin Animation for Icon (JavaScript)

Source: https://figblocks.mohanvadivel.com/components/icon

Explains how to enable a spinning animation for the Icon component, which is useful for loading indicators. This is achieved by passing the 'spin' prop along with an icon SVG.

```javascript
<script>
	import { Icon } from 'figblocks';
	import { IconSpinner } from 'figblocks/icons';
</script>

<Icon spin iconSvg={IconSpinner} />
```

--------------------------------

### Basic Checkbox Usage with Svelte

Source: https://figblocks.mohanvadivel.com/components/checkbox

Demonstrates how to import and use the basic Checkbox component from 'figblocks' in a Svelte application. It shows binding the checkbox's checked state to a local variable.

```javascript
<script>
	import { Checkbox } from 'figblocks';
	let isChecked = false;
</script>

<Checkbox bind:checked={isChecked}>I haven't read the TOC</Checkbox>
```

--------------------------------

### Render Figblocks Text Component Inline

Source: https://figblocks.mohanvadivel.com/components/text

Demonstrates how to render the Text component as an inline element instead of its default block-level behavior by using the 'inline' prop.

```html
<Text inline>Hamburger</Text>
```

--------------------------------

### Customize Figblocks Select Placeholder (Svelte)

Source: https://figblocks.mohanvadivel.com/components/select

Shows how to override the default placeholder text of the Figblocks Select component using the `placeholder` prop. This allows for custom prompts like 'choose a fruit' instead of the default 'Choose an option'.

```html
<Select bind:menuItems placeholder="choose a fruit" />

```

--------------------------------

### SectionTitle Component Variants (JavaScript)

Source: https://figblocks.mohanvadivel.com/components/section-title

Illustrates the usage of the 'variant' prop for the SectionTitle component to control its visual style. Two variants, 'regular' and 'large', are shown.

```javascript
<SectionTitle variant="regular">Position</SectionTitle>
<SectionTitle variant="large">Position</SectionTitle>
```

--------------------------------

### Textarea with Label using Figblocks Components

Source: https://figblocks.mohanvadivel.com/components/textarea

Illustrates how to associate a Label component with a Textarea component from 'figBlocks'. This improves accessibility by linking the label to the input field using an 'for' and 'id' attribute pair.

```html
<div>
	<Label for="txt1">Enter the text here</Label>
	<Textarea id="txt1" placeholder="some value here" />
</div>
```

--------------------------------

### Import Figma Theme for Prototyping

Source: https://figblocks.mohanvadivel.com/guidelines/color

When prototyping Figblocks outside of the Figma canvas, such as in a web browser environment, the standard color tokens may not be accessible. To resolve this, you can import the `figmaTheme` module from 'figblocks' to utilize the theme colors in these standalone prototypes.

```javascript
import "figblocks/figmaTheme";
```

--------------------------------

### Figblocks Switch with Label

Source: https://figblocks.mohanvadivel.com/components/switch

Shows how to associate a label with the Figblocks Switch component using its default slot. This enhances accessibility and user experience by clearly indicating the purpose of the switch.

```html
<script>
	import { Switch } from 'figblocks';
</script>

<Switch>Notifications</Switch>
```

--------------------------------

### Figblocks Button Variants (Primary, Secondary, Tertiary)

Source: https://figblocks.mohanvadivel.com/components/button

Illustrates how to apply different visual styles to the Button component using the `variant` prop. This allows users to choose between primary, secondary, and tertiary appearances for their buttons. Each variant serves different hierarchical or functional purposes.

```html
<Button variant="primary">Label</Button>
<Button variant="secondary">Label</Button>
<Button variant="tertiary">Label</Button>
```

--------------------------------

### Group Options in Figblocks Select (Svelte)

Source: https://figblocks.mohanvadivel.com/components/select

Explains how to group options within the Figblocks Select component by adding a `group` property to each menu item. This organizes related options under specific headings, improving the user experience for selects with many choices.

```html
<script>
	import { Select } from 'figblocks';

	let menuItems = [
		{ label: 'Apple', group: 'fruit', value: 'apple', selected: false },
		{ label: 'Mango', group: 'fruit', value: 'mango', selected: false },
		{ label: 'Carrot', group: 'veg', value: 'carrot', selected: false },
		{ label: 'Beetroot', group: 'veg', value: 'beetroot', selected: false }
	];
</script>

<Select bind:menuItems />

```

--------------------------------

### Enabling Borders on Number Input (Svelte)

Source: https://figblocks.mohanvadivel.com/components/number-input

Illustrates how to force a border on the NumberInput field using the 'border' prop. This is useful for visually distinguishing input fields or adhering to specific design requirements.

```svelte
<NumberInput value="13" />
<NumberInput border value="69" />
```

--------------------------------

### Group Checkbox Usage with Svelte

Source: https://figblocks.mohanvadivel.com/components/checkbox

Illustrates using the 'Checkbox' component for group selection in Svelte. It shows how to bind multiple checkboxes to a shared array to manage selections.

```javascript
<script>
	import { Checkbox } from 'figblocks';
	let fruits = ['apple'];
</script>

<Checkbox bind:group={fruits} value="apple">Apple</Checkbox>
<Checkbox bind:group={fruits} value="orange">Orange</Checkbox>
```

--------------------------------

### TextInput with Label in Svelte

Source: https://figblocks.mohanvadivel.com/components/text-input

Illustrates how to associate a Label with a TextInput component in Svelte for better accessibility and user experience. It involves importing both `TextInput` and `Label` from 'figblocks' and linking them using the 'for' and 'id' attributes.

```svelte
<script>
	import { TextInput, Label } from 'figblocks';
</script>

<div>
	<Label for="xpos">Position</Label>
	<TextInput id="xpos" placeholder="Enter the x position" />
</div>
```

--------------------------------

### Figblocks Select Component Type Definitions (TypeScript)

Source: https://figblocks.mohanvadivel.com/components/select

Provides the TypeScript type definitions for the Menu and MenuItems props used in the Figblocks Select component. Menu defines the structure of a single option, including its value, label, selected state, and optional group and id. MenuItems is an array of Menu objects.

```typescript
// Type definitions
type Menu = {
	value: string;
	label: string;
	selected: boolean;
	group?: string;
	id?: number;
};

type MenuItems = Menu[];

```

--------------------------------

### Apply Inverse Styling to Figblocks Text Component

Source: https://figblocks.mohanvadivel.com/components/text

Shows how to use the 'inverse' prop to manually adjust letter spacing for specific contrast needs, such as light text on dark backgrounds. The component handles dark mode adjustments automatically.

```html
<Text inverse size="xlarge">Hamburger</Text>
```

--------------------------------

### Svelte: Option Button Inactive Icon Fallback

Source: https://figblocks.mohanvadivel.com/components/option-button

Demonstrates the fallback behavior of the OptionButton when 'inactiveIconSVG' or 'inactiveIconText' is not provided. In this case, the active icon is used for both states.

```svelte
<script>
	import { OptionButton } from 'figblocks';
	import { IconAdjust } from 'figblocks/icons';
</script>

<OptionButton iconSvg={IconAdjust} />
```

--------------------------------

### Show Group Labels in Figblocks Select (Svelte)

Source: https://figblocks.mohanvadivel.com/components/select

Demonstrates how to explicitly display the group labels for grouped options in the Figblocks Select component using the `showGroupLabel` prop. When set to true, each group's name will be clearly visible above its options.

```html
<script>
	import { Select } from 'figblocks';

	let menuItems = [
		{ label: 'Apple', group: 'fruit', value: 'apple', selected: false },
		{ label: 'Mango', group: 'fruit', value: 'mango', selected: false },
		{ label: 'Carrot', group: 'veg', value: 'carrot', selected: false },
		{ label: 'Beetroot', group: 'veg', value: 'beetroot', selected: false }
	];
</script>

<Select bind:menuItems showGrouplabels />

```

--------------------------------

### Setting Invalid State and Error Message for Number Input (Svelte)

Source: https://figblocks.mohanvadivel.com/components/number-input

Shows how to mark a NumberInput as invalid using the 'invalid' prop and provide a user-friendly error message via the 'errorMessage' prop. This is crucial for form validation and providing feedback to the user when input is incorrect.

```svelte
<NumberInput invalid value={42} errorMessage="The answer to life, the universe..." />
```

--------------------------------

### Render Custom SVG Icon with Color Override (JavaScript)

Source: https://figblocks.mohanvadivel.com/components/icon

Shows how to render a custom SVG icon by passing an SVG string directly to the 'iconSvg' prop. It also demonstrates how to override the default icon color using the 'color' prop with a color token.

```javascript
<script>
	import { Icon } from 'figblocks';
	const svgString = `<svg width="24" height="22" viewBox="0 0 24 22"><path d="M12 0L14.6942 8.2918H23.4127L16.3593 13.4164L19.0534 21.7082L12 16.5836L4.94658 21.7082L7.64074 13.4164L0.587322 8.2918H9.30583L12 0Z"/></svg>`;
</script>

<Icon iconSvg={svgString} />
<Icon iconSvg={svgString} color="--figma-color-icon-brand" />
```

--------------------------------

### TextInput with Icon in Svelte

Source: https://figblocks.mohanvadivel.com/components/text-input

Explains how to add an icon (using SVG or text) to the TextInput component with the 'iconSvg' or 'iconText' props. It requires importing `TextInput` and potentially `Icon` or specific icon components from 'figblocks'.

```svelte
<script>
	import { TextInput, Icon } from 'figblocks';
	import { IconCode } from 'figblocks/icons';
</script>

<TextInput iconSvg={IconCode} placeholder="Enter the value here" />
```

--------------------------------

### Add Icon to Figblocks Select Component (Svelte)

Source: https://figblocks.mohanvadivel.com/components/select

Illustrates how to add an icon to the Figblocks Select component using the `iconSvg` prop. This prop accepts an SVG icon definition, which will be displayed alongside the select input. For more details on icons, refer to the Icon component documentation.

```html
<Select bind:menuItems iconSvg={IconCode} />

```

--------------------------------

### Enable Theme Colors in Figma UI

Source: https://figblocks.mohanvadivel.com/guidelines/color

To allow your plugin UI to access dynamic color tokens that adapt to Figma's light and dark modes, you must enable `themeColors` when calling `figma.showUI()`. This setting ensures that color variables are updated automatically as the user switches between themes.

```typescript
figma.showUI(__html__, { themeColors: true })
```

--------------------------------

### Inline Radio Group Configuration with Svelte

Source: https://figblocks.mohanvadivel.com/components/radio

Shows how to display radio buttons horizontally using the 'inline' prop on the RadioGroup component. This is useful for creating compact selection interfaces.

```html
<script>
    let flavours = 'vanilla';
</script>

<RadioGroup inline bind:group={flavours} name="flavour">
	<Radio value="vanilla">Vanilla</Radio>
	<Radio value="strawberry">Strawberry</Radio>
	<Radio value="pista">Pista</Radio>
</RadioGroup>
```

--------------------------------

### Disclosure with Section Title Bold (Svelte)

Source: https://figblocks.mohanvadivel.com/components/disclosure

Shows how to render the disclosure item's title in a bold format using the `section` prop. This is useful for highlighting main sections within the disclosure component.

```html
<Disclosure>
	<DisclosureItem title="Disclosure" section>disclousure item</DisclosureItem>
</Disclosure>
```

--------------------------------

### SectionTitle Component with Border (JavaScript)

Source: https://figblocks.mohanvadivel.com/components/section-title

Shows how to apply a bottom border to the SectionTitle component using the 'border' prop. This prop is effective only when the 'variant' is set to 'large'.

```javascript
<SectionTitle border variant="large">Position</SectionTitle>
```

--------------------------------

### Set Figblocks IconButton to Active State

Source: https://figblocks.mohanvadivel.com/components/icon-button

Shows how to activate the IconButton component by passing the `active` prop. This is useful for indicating a selected or currently engaged state.

```svelte
<script>
	import { IconButton } from 'figblocks';
	import { IconStyles } from 'figblocks/icons';
</script>

<IconButton iconSvg={IconStyles} active />
```

--------------------------------

### Figblocks Destructive Button States

Source: https://figblocks.mohanvadivel.com/components/button

Shows how to style buttons for destructive actions using the `destructive` prop in combination with the `variant` prop. This visual cue helps users identify buttons that perform irreversible or potentially harmful operations. It is recommended to use destructive styling carefully.

```html
<Button destructive variant="primary">Label</Button>
<Button destructive variant="secondary">Label</Button>
<Button destructive variant="tertiary">Label</Button>
```

--------------------------------

### Customize Figblocks Text Component Font Weight

Source: https://figblocks.mohanvadivel.com/components/text

Illustrates how to control the font weight of the Text component with the 'weight' prop. The default weight is 'normal', with 'medium' and 'bold' as alternatives.

```html
<Text weight="normal">Hamburger</Text>
<Text weight="medium">Hamburger</Text>
<Text weight="bold">Hamburger</Text>
```

--------------------------------

### Svelte: Option Button Disabled State

Source: https://figblocks.mohanvadivel.com/components/option-button

Illustrates how to disable the OptionButton component by using the 'disabled' prop. Disabled buttons are non-interactive and visually distinct.

```svelte
<script>
	import { OptionButton } from 'figblocks';
	import { IconLinkBroken, IconLinkConnected } from 'figblocks/icons';
</script>

<OptionButton disabled iconSvg={IconLinkConnected} inactiveIconSVG={IconLinkBroken} />
```

--------------------------------

### Figblocks Disabled Button State

Source: https://figblocks.mohanvadivel.com/components/button

Demonstrates how to disable a Button component by passing the `disabled` prop. Disabled buttons are visually distinct and do not respond to user interactions, preventing accidental actions. This is useful for controlling the user flow and indicating unavailable options.

```html
<Button disabled variant="primary">Label</Button>
<Button disabled variant="secondary">Label</Button>
<Button disabled variant="tertiary">Label</Button>
```

--------------------------------

### Mixed State Checkbox with Svelte

Source: https://figblocks.mohanvadivel.com/components/checkbox

Demonstrates how to use the 'mixed' prop with the Checkbox component in Svelte to indicate an indeterminate or mixed selection state. This is often used in hierarchical or group selections.

```javascript
<Checkbox mixed checked>Apple</Checkbox>
<Checkbox mixed>Orange</Checkbox>
```

--------------------------------

### TextInput with Border and Disabled States in Svelte

Source: https://figblocks.mohanvadivel.com/components/text-input

Shows how to apply a visible border and disable user interaction on the TextInput component using the 'border' and 'disabled' props respectively. This is useful for indicating input field focus or preventing edits.

```svelte
<TextInput value="some value here" />
<TextInput border value="some value here" />
<TextInput disabled value={42} />
```

--------------------------------

### Customize Figblocks Text Component Font Size

Source: https://figblocks.mohanvadivel.com/components/text

Shows how to adjust the font size of the Text component using the 'size' prop. The default size is 'small', with options for 'xsmall', 'large', and 'xlarge'.

```html
<Text size="xsmall">Hamburger</Text>
<Text size="small">Hamburger</Text>
<Text size="large">Hamburger</Text>
<Text size="xlarge">Hamburger</Text>
```

--------------------------------

### Customizing Textarea Rows with Figblocks

Source: https://figblocks.mohanvadivel.com/components/textarea

Demonstrates how to set the initial visible height of the Textarea component using the `rows` prop. The value should be greater than 2 to ensure adequate vertical space.

```html
<Textarea rows="6" value="A quick brow fox jumps over a lazy dog" />
```

--------------------------------

### Disable Figblocks Select Component (Svelte)

Source: https://figblocks.mohanvadivel.com/components/select

Demonstrates how to disable the Figblocks Select component by passing the `disabled` prop. When disabled, the select input will not be interactive, preventing user selection.

```html
<Select bind:menuItems disabled />

```

--------------------------------

### Disclosure with Borders Disabled (Svelte)

Source: https://figblocks.mohanvadivel.com/components/disclosure

Illustrates how to disable the default border separator between disclosure sections by utilizing the `border` prop. This allows for a cleaner visual presentation when separators are not desired.

```html
<Disclosure border={false}>
	<DisclosureItem title="First" open>First item</DisclosureItem>
	<DisclosureItem title="Second">Second item</DisclosureItem>
</Disclosure>
```

--------------------------------

### Invalid TextInput State with Error Message in Svelte

Source: https://figblocks.mohanvadivel.com/components/text-input

Demonstrates how to visually indicate an invalid input state and provide a specific error message using the 'invalid' and 'errorMessage' props. This is crucial for form validation feedback.

```svelte
<TextInput invalid value={42} errorMessage="The answer to life, the universe..." />
```

--------------------------------

### Figblocks Switch Disabled State

Source: https://figblocks.mohanvadivel.com/components/switch

Illustrates how to disable the Figblocks Switch component using the 'disabled' prop. This prevents user interaction and is useful for indicating read-only states or settings that are not currently configurable.

```html
<script>
	import { Switch } from 'figblocks';
</script>

<Switch disabled>Email Notifications</Switch>
<Switch disabled checked>Desktop Notifications</Switch>
```

--------------------------------

### Customize Figblocks Text Component Font Color

Source: https://figblocks.mohanvadivel.com/components/text

Explains how to override the default text color using the 'color' prop with valid CSS color tokens. This allows for flexible color customization.

```html
<Text color="--figma-color-text-brand">Hamburger</Text>
```

--------------------------------

### Disabling Number Input Field (Svelte)

Source: https://figblocks.mohanvadivel.com/components/number-input

Demonstrates how to disable the NumberInput component by passing the 'disabled' prop. A disabled input cannot be interacted with by the user, often used to indicate read-only data or unavailable options.

```svelte
<NumberInput disabled value={42} />
```

--------------------------------

### Disabled Textarea State with Figblocks

Source: https://figblocks.mohanvadivel.com/components/textarea

Shows how to disable the Textarea component by passing the `disabled` prop. A disabled textarea is non-interactive and typically displayed with a different visual style.

```html
<Textarea disabled value="A quick brow fox jumps over a lazy dog" />
```

--------------------------------

### Disabled Checkbox States with Svelte

Source: https://figblocks.mohanvadivel.com/components/checkbox

Shows how to apply the 'disabled' prop to Checkbox components in Svelte, rendering them unclickable and visually distinct. It demonstrates disabling both checked and unchecked states.

```javascript
<Checkbox disabled checked>Apple</Checkbox>
<Checkbox disabled>Orange</Checkbox>
```

--------------------------------

### Disable Figblocks IconButton

Source: https://figblocks.mohanvadivel.com/components/icon-button

Illustrates how to disable the IconButton component by using the `disabled` prop. A disabled button is non-interactive and visually indicated as such.

```svelte
<script>
	import { IconButton } from 'figblocks';
	import { IconStyles } from 'figblocks/icons';
</script>

<IconButton disabled iconSvg={IconStyles} />
```
Tokens:
Raw