UI Components

App UI is composed of a set of supported components that can be used to render the UI.

It's important to keep in mind that the UI components are rendered server-side as strings.
While the markup is designed to be React-like for ease of use, these are not React components and you should not use any React specific or client-side APIs. Think of it as generating an XML response.

UI Components Gallery

Visual Component Reference

Below is a complete visual reference of all UI components available in the Antispace Apps SDK:

UI Components Gallery Code

Here's the code used to build the comprehensive component showcase shown in the image above:


<Anti.Column align="center" padding="large" width="full">
  <Anti.Text type="display" align="center" weight="semibold">Component Library</Anti.Text>
  <Anti.Text type="subheading" align="center">A comprehensive showcase of available UI components</Anti.Text>
  
  <Anti.Divider type="horizontal" />
  
  <Anti.Row width="full" padding="large">
    <Anti.Column width="full" align="left" spacing="medium">
      <Anti.Text type="heading1" weight="bold">Typography</Anti.Text>
      
      <Anti.Text type="display">Display Text</Anti.Text>
      <Anti.Text type="heading1">Heading 1</Anti.Text>
      <Anti.Text type="heading2">Heading 2</Anti.Text>
      <Anti.Text type="heading3">Heading 3</Anti.Text>
      <Anti.Text type="subheading">Subheading</Anti.Text>
      <Anti.Text type="body">Body Text - Used for main content areas</Anti.Text>
      <Anti.Text type="small">Small Text - Used for supporting information</Anti.Text>
      <Anti.Text type="caption">Caption Text - Used for image captions and footnotes</Anti.Text>
      
      <Anti.Row spacing="medium" padding="medium">
        <Anti.Column width="auto" spacing="small">
          <Anti.Text type="heading3">Semantic Text</Anti.Text>
          <Anti.Text type="positive">Positive</Anti.Text>
          <Anti.Text type="negative">Negative</Anti.Text>
          <Anti.Text type="accent">Accent</Anti.Text>
          <Anti.Text type="cyber">Cyber</Anti.Text>
          <Anti.Text type="dim">Dim</Anti.Text>
          <Anti.Text type="light">Light</Anti.Text>
        </Anti.Column>
        
        <Anti.Column width="auto" spacing="small">
          <Anti.Text type="heading3">Text Weights</Anti.Text>
          <Anti.Text weight="light">Light Weight</Anti.Text>
          <Anti.Text weight="regular">Regular Weight</Anti.Text>
          <Anti.Text weight="medium">Medium Weight</Anti.Text>
          <Anti.Text weight="semibold">Semibold Weight</Anti.Text>
          <Anti.Text weight="bold">Bold Weight</Anti.Text>
        </Anti.Column>
        
        <Anti.Column width="auto" spacing="small">
          <Anti.Text type="heading3">Text Tracking</Anti.Text>
          <Anti.Text tracking="tighter">Tighter Tracking</Anti.Text>
          <Anti.Text tracking="tight">Tight Tracking</Anti.Text>
          <Anti.Text tracking="normal">Normal Tracking</Anti.Text>
          <Anti.Text tracking="wide">Wide Tracking</Anti.Text>
          <Anti.Text tracking="wider">Wider Tracking</Anti.Text>
        </Anti.Column>
      </Anti.Row>
    </Anti.Column>
  </Anti.Row>
  
  <Anti.Divider type="horizontal" />
  
  <Anti.Row width="full" padding="large">
    <Anti.Column width="full" align="left" spacing="medium">
      <Anti.Text type="heading1" weight="bold">Layout Components</Anti.Text>
      
      <Anti.Row padding="medium" width="full">
        <Anti.Text type="heading2">Row Types</Anti.Text>
      </Anti.Row>
      
      <Anti.Row type="default" padding="medium" width="full" spacing="medium">
        <Anti.Badge text="Default Row" type="secondary" />
        <Anti.Text>Simple container with horizontal layout</Anti.Text>
      </Anti.Row>
      
      <Anti.Row type="border" padding="medium" width="full" spacing="medium">
        <Anti.Badge text="Border Row" type="secondary" />
        <Anti.Text>Row with border styling</Anti.Text>
      </Anti.Row>
      
      <Anti.Row type="side-border" padding="medium" width="full" spacing="medium">
        <Anti.Badge text="Side Border" type="secondary" />
        <Anti.Text>Row with left border accent</Anti.Text>
      </Anti.Row>
      
      <Anti.Row type="side-border-reverse" padding="medium" width="full" spacing="medium">
        <Anti.Badge text="Side Border Reverse" type="secondary" />
        <Anti.Text>Row with right border accent</Anti.Text>
      </Anti.Row>
      
      <Anti.Row type="default" highlighted={true} padding="medium" width="full" spacing="medium">
        <Anti.Badge text="Highlighted Row" type="primary" />
        <Anti.Text>Row with highlight effect</Anti.Text>
      </Anti.Row>
      
      <Anti.Row padding="medium" width="full">
        <Anti.Text type="heading2">Column Types</Anti.Text>
      </Anti.Row>
      
      <Anti.Row width="full" spacing="medium" padding="medium">
        <Anti.Column type="default" padding="medium" width="auto" spacing="small" align="center">
          <Anti.Text type="heading3">Default</Anti.Text>
          <Anti.Text>Standard column</Anti.Text>
        </Anti.Column>
        
        <Anti.Column type="border" padding="medium" width="auto" spacing="small" align="center">
          <Anti.Text type="heading3">Border</Anti.Text>
          <Anti.Text>Column with border</Anti.Text>
        </Anti.Column>
        
        <Anti.Column type="default" highlighted={true} padding="medium" width="auto" spacing="small" align="center">
          <Anti.Text type="heading3">Highlighted</Anti.Text>
          <Anti.Text>With highlight effect</Anti.Text>
        </Anti.Column>
      </Anti.Row>
      
      <Anti.Row padding="medium" width="full">
        <Anti.Text type="heading2">Alignment & Justification</Anti.Text>
      </Anti.Row>
      
      <Anti.Text type="subheading">Row Alignment (vertical)</Anti.Text>
      <Anti.Row align="top" type="border" padding="medium" width="full">
        <Anti.Text>align="top"</Anti.Text>
        <Anti.Badge text="Example" type="secondary" />
      </Anti.Row>
      
      <Anti.Row align="center" type="border" padding="medium" width="full">
        <Anti.Text>align="center"</Anti.Text>
        <Anti.Badge text="Example" type="secondary" />
      </Anti.Row>
      
      <Anti.Row align="bottom" type="border" padding="medium" width="full">
        <Anti.Text>align="bottom"</Anti.Text>
        <Anti.Badge text="Example" type="secondary" />
      </Anti.Row>
      
      <Anti.Text type="subheading">Column Alignment (horizontal)</Anti.Text>
      <Anti.Row width="full" spacing="medium">
        <Anti.Column align="left" type="border" padding="small" width="auto">
          <Anti.Text>align="left"</Anti.Text>
        </Anti.Column>
        
        <Anti.Column align="center" type="border" padding="small" width="auto">
          <Anti.Text>align="center"</Anti.Text>
        </Anti.Column>
        
        <Anti.Column align="right" type="border" padding="small" width="auto">
          <Anti.Text>align="right"</Anti.Text>
        </Anti.Column>
      </Anti.Row>
      
      <Anti.Text type="subheading">Justify Content</Anti.Text>
      <Anti.Row justify="start" type="border" padding="small" width="full">
        <Anti.Badge text="justify=start" type="secondary" />
        <Anti.Badge text="Example" type="secondary" />
      </Anti.Row>
      
      <Anti.Row justify="center" type="border" padding="small" width="full">
        <Anti.Badge text="justify=center" type="secondary" />
        <Anti.Badge text="Example" type="secondary" />
      </Anti.Row>
      
      <Anti.Row justify="end" type="border" padding="small" width="full">
        <Anti.Badge text="justify=end" type="secondary" />
        <Anti.Badge text="Example" type="secondary" />
      </Anti.Row>
      
      <Anti.Row justify="space-between" type="border" padding="small" width="full">
        <Anti.Badge text="justify=space-between" type="secondary" />
        <Anti.Badge text="Example" type="secondary" />
      </Anti.Row>
      
      <Anti.Row justify="space-around" type="border" padding="small" width="full">
        <Anti.Badge text="justify=space-around" type="secondary" />
        <Anti.Badge text="Example" type="secondary" />
      </Anti.Row>
    </Anti.Column>
  </Anti.Row>
  
  <Anti.Divider type="horizontal" />
  
  <Anti.Row width="full" padding="large">
    <Anti.Column width="full" align="left" spacing="medium">
      <Anti.Text type="heading1" weight="bold">Interactive Elements</Anti.Text>
      
      <Anti.Row padding="medium" width="full">
        <Anti.Text type="heading2">Buttons</Anti.Text>
      </Anti.Row>
      
      <Anti.Row spacing="medium" padding="medium">
        <Anti.Column width="auto" spacing="small">
          <Anti.Text type="heading3">Button Types</Anti.Text>
          <Anti.Button action="primary-action" text="Primary" type="primary" size="medium" />
          <Anti.Button action="secondary-action" text="Secondary" type="secondary" size="medium" />
          <Anti.Button action="negative-action" text="Negative" type="negative" size="medium" />
          <Anti.Button action="bold-action" text="Bold" type="bold" size="medium" />
          <Anti.Button action="accent-action" text="Accent" type="accent" size="medium" />
        </Anti.Column>
        
        <Anti.Column width="auto" spacing="small">
          <Anti.Text type="heading3">Button Sizes</Anti.Text>
          <Anti.Button action="small-btn" text="Small" type="primary" size="small" />
          <Anti.Button action="medium-btn" text="Medium" type="primary" size="medium" />
          <Anti.Button action="large-btn" text="Large" type="primary" size="large" />
        </Anti.Column>
        
        <Anti.Column width="auto" spacing="small">
          <Anti.Text type="heading3">Button States</Anti.Text>
          <Anti.Button action="loading-btn" text="With Loading Text" loadingText="Loading..." type="primary" size="medium" />
          <Anti.Button action="disabled-btn" text="Disabled Button" disabled={true} type="primary" size="medium" />
          <Anti.Button action="conditional-btn" text="Conditional Disabled" disabledWhen="isLoading" type="primary" size="medium" />
        </Anti.Column>
      </Anti.Row>
      
      <Anti.Row padding="medium" width="full">
        <Anti.Text type="heading2">Form Components</Anti.Text>
      </Anti.Row>
      
      <Anti.Row width="full" spacing="large">
        <Anti.Column width="half" spacing="medium">
          <Anti.Text type="heading3">Input Types</Anti.Text>
          
          <Anti.Text type="subheading">Text Input</Anti.Text>
          <Anti.Input name="text-input" type="text" placeholder="Text input example" width="full" />
          
          <Anti.Text type="subheading">Number Input</Anti.Text>
          <Anti.Input name="number-input" type="number" placeholder="Number input example" width="full" />
          
          <Anti.Text type="subheading">Date Input</Anti.Text>
          <Anti.Input name="date-input" type="date" width="full" />
          
          <Anti.Text type="subheading">Disabled Input</Anti.Text>
          <Anti.Input name="disabled-input" placeholder="Disabled input example" disabled={true} width="full" />
          
          <Anti.Text type="subheading">Input Widths</Anti.Text>
          <Anti.Row width="full" spacing="small">
            <Anti.Input name="full-width" placeholder="Full width" width="full" />
          </Anti.Row>
          <Anti.Row width="full" spacing="small">
            <Anti.Input name="half-width" placeholder="Half width" width="half" />
          </Anti.Row>
          <Anti.Row width="full" spacing="small">
            <Anti.Input name="auto-width" placeholder="Auto width" width="auto" />
          </Anti.Row>
        </Anti.Column>
        
        <Anti.Column width="half" spacing="medium">
          <Anti.Text type="heading3">Textarea</Anti.Text>
          <Anti.Textarea name="textarea-example" placeholder="Standard textarea example" width="full" />
          
          <Anti.Textarea name="disabled-textarea" placeholder="Disabled textarea example" disabled={true} width="full" />
          
          <Anti.Text type="heading3">Select & Options</Anti.Text>
          <Anti.Select name="select-example" width="full">
            <Anti.SelectOption value="option1" label="Option One" />
            <Anti.SelectOption value="option2" label="Option Two" />
            <Anti.SelectOption value="option3" label="Option Three" />
          </Anti.Select>
          
          <Anti.Select name="disabled-select" disabled={true} width="full">
            <Anti.SelectOption value="option1" label="Disabled Select Example" />
            <Anti.SelectOption value="option2" label="Option Two" />
          </Anti.Select>
          
          <Anti.Text type="heading3">Checkbox</Anti.Text>
          <Anti.Checkbox name="checkbox1" label="Standard checkbox" />
          <Anti.Checkbox name="checkbox2" label="Disabled checkbox" disabled={true} />
        </Anti.Column>
      </Anti.Row>
    </Anti.Column>
  </Anti.Row>
  
  <Anti.Divider type="horizontal" />
  
  <Anti.Row width="full" padding="large">
    <Anti.Column width="full" align="left" spacing="medium">
      <Anti.Text type="heading1" weight="bold">Media & Decorative Elements</Anti.Text>
      
      <Anti.Row padding="medium" width="full">
        <Anti.Text type="heading2">Images</Anti.Text>
      </Anti.Row>
      
      <Anti.Row width="full" spacing="large" justify="space-around">
        <Anti.Column width="auto" align="center" spacing="small">
          <Anti.Text type="subheading">Standard Image</Anti.Text>
          <Anti.Image src="https://storage.googleapis.com/antibadge/demo/buzzymonk_A_dark_foggy_landscape_with_a_robotic_figure_standing_fd7c91eb-4acc-4d57-b0be-7dea99a87bce.png" alt="Standard image" width={200} height={150} />
        </Anti.Column>
        
        <Anti.Column width="auto" align="center" spacing="small">
          <Anti.Text type="subheading">Rounded, Cover Fit</Anti.Text>
          <Anti.Image src="https://storage.googleapis.com/antibadge/demo/buzzymonk_A_dark_foggy_landscape_with_a_robotic_figure_standing_fd7c91eb-4acc-4d57-b0be-7dea99a87bce.png" alt="Rounded image" width={200} height={150} rounded={true} fit="cover" />
        </Anti.Column>
        
        <Anti.Column width="auto" align="center" spacing="small">
          <Anti.Text type="subheading">Grayscale Filter</Anti.Text>
          <Anti.Image src="https://storage.googleapis.com/antibadge/demo/buzzymonk_A_dark_foggy_landscape_with_a_robotic_figure_standing_fd7c91eb-4acc-4d57-b0be-7dea99a87bce.png" alt="Grayscale image" width={200} height={150} filter="grayscale" />
        </Anti.Column>
      </Anti.Row>
      
      <Anti.Row padding="medium" width="full">
        <Anti.Text type="heading2">Badges</Anti.Text>
      </Anti.Row>
      
      <Anti.Row width="full" spacing="medium" justify="start">
        <Anti.Badge text="Primary Badge" type="primary" />
        <Anti.Badge text="Secondary Badge" type="secondary" />
        <Anti.Badge text="Danger Badge" type="danger" />
        <Anti.Badge text="Accent Badge" type="accent" />
      </Anti.Row>
      
      <Anti.Row padding="medium" width="full">
        <Anti.Text type="heading2">Links</Anti.Text>
      </Anti.Row>
      
      <Anti.Row width="full" spacing="medium" justify="start">
        <Anti.Link href="https://example.com" text="Example link" />
        <Anti.Link href="https://docs.example.com" text="Documentation link" />
      </Anti.Row>
      
      <Anti.Row padding="medium" width="full">
        <Anti.Text type="heading2">Dividers</Anti.Text>
      </Anti.Row>
      
      <Anti.Text type="subheading">Horizontal Divider</Anti.Text>
      <Anti.Divider type="horizontal" />
      
      <Anti.Text type="subheading">Vertical Divider</Anti.Text>
      <Anti.Row width="full" spacing="medium" padding="medium" justify="center">
        <Anti.Text>Left Content</Anti.Text>
        <Anti.Divider type="vertical" />
        <Anti.Text>Right Content</Anti.Text>
      </Anti.Row>
    </Anti.Column>
  </Anti.Row>
  
  <Anti.Divider type="horizontal" />
  
  <Anti.Row width="full" padding="large">
    <Anti.Column width="full" align="left" spacing="medium">
      <Anti.Text type="heading1" weight="bold">Interactive Dashboard Example</Anti.Text>
      <Anti.Text type="subheading">A monitoring dashboard with real-time data visualization</Anti.Text>
      
      <Anti.Row width="full" justify="space-between" padding="medium">
        <Anti.Column type="border" highlighted={true} width="auto" padding="medium" spacing="small">
          <Anti.Row justify="space-between" align="center" width="full">
            <Anti.Text type="heading3">System Status</Anti.Text>
            <Anti.Badge text="Online" type="primary" />
          </Anti.Row>
          
          <Anti.Row justify="space-between" width="full" padding="small">
            <Anti.Text type="subheading">CPU Usage</Anti.Text>
            <Anti.Text type="subheading" weight="bold">42%</Anti.Text>
          </Anti.Row>
          
          <Anti.Row justify="space-between" width="full" padding="small">
            <Anti.Text type="subheading">Memory</Anti.Text>
            <Anti.Text type="subheading" weight="bold">6.2 GB / 16 GB</Anti.Text>
          </Anti.Row>
          
          <Anti.Row justify="space-between" width="full" padding="small">
            <Anti.Text type="subheading">Temperature</Anti.Text>
            <Anti.Text type="negative" weight="bold">75°C</Anti.Text>
          </Anti.Row>
          
          <Anti.Button action="refresh-stats" text="Refresh Stats" type="secondary" size="small" />
        </Anti.Column>
        
        <Anti.Column type="border" width="half" padding="medium" spacing="small">
          <Anti.Row justify="space-between" align="center" width="full">
            <Anti.Text type="heading3">Active Users</Anti.Text>
            <Anti.Row spacing="small">
              <Anti.Badge text="1,254 Online" type="accent" />
              <Anti.Badge text="↑ 12%" type="primary" />
            </Anti.Row>
          </Anti.Row>
          
          <Anti.Image src="https://storage.googleapis.com/antibadge/demo/dwoxy5076_A_purely_analytical_data-driven_visualization_as_perc_c780434f-f0ca-407d-8f41-e9d113ec14b8.png" alt="User activity graph" width={500} height={200} />
          
          <Anti.Row width="full" justify="end" spacing="small">
            <Anti.Button action="view-details" text="View Details" type="secondary" size="small" />
            <Anti.Button action="export-data" text="Export Data" type="primary" size="small" />
          </Anti.Row>
        </Anti.Column>
      </Anti.Row>
      
      <Anti.Row width="full" type="side-border" padding="medium">
        <Anti.Column width="full" spacing="medium">
          <Anti.Row justify="space-between" align="center">
            <Anti.Text type="heading3">Recent Alerts</Anti.Text>
            <Anti.Badge text="3 New" type="danger" />
          </Anti.Row>
          
          <Anti.Row type="border" width="full" padding="medium" align="center">
            <Anti.Badge text="Critical" type="danger" />
            <Anti.Column width="full" padding="small">
              <Anti.Text type="subheading" weight="semibold">Database Connection Error</Anti.Text>
              <Anti.Text type="small">Connection to primary database lost at 14:22. Failover initiated.</Anti.Text>
            </Anti.Column>
            <Anti.Button action="resolve-alert" text="Resolve" type="secondary" size="small" />
          </Anti.Row>
          
          <Anti.Row type="border" width="full" padding="medium" align="center">
            <Anti.Badge text="Warning" type="secondary" />
            <Anti.Column width="full" padding="small">
              <Anti.Text type="subheading" weight="semibold">CPU Usage Spike</Anti.Text>
              <Anti.Text type="small">CPU load exceeded 80% for more than 5 minutes.</Anti.Text>
            </Anti.Column>
            <Anti.Button action="resolve-alert" text="Resolve" type="secondary" size="small" />
          </Anti.Row>
          
          <Anti.Row type="border" width="full" padding="medium" align="center">
            <Anti.Badge text="Info" type="primary" />
            <Anti.Column width="full" padding="small">
              <Anti.Text type="subheading" weight="semibold">Deployment Completed</Anti.Text>
              <Anti.Text type="small">Version 2.4.1 deployed successfully to production.</Anti.Text>
            </Anti.Column>
            <Anti.Button action="resolve-alert" text="Dismiss" type="secondary" size="small" />
          </Anti.Row>
        </Anti.Column>
      </Anti.Row>
      
      <Anti.Row width="full" padding="medium" justify="space-between">
        <Anti.Column type="border" width="auto" padding="medium" spacing="small">
          <Anti.Text type="heading3">Quick Actions</Anti.Text>
          
          <Anti.Button action="restart-service" text="Restart Services" type="primary" size="medium" />
          <Anti.Button action="clear-cache" text="Clear Cache" type="secondary" size="medium" />
          <Anti.Button action="backup-now" text="Create Backup" type="accent" size="medium" />
          <Anti.Button action="maintenance-mode" text="Maintenance Mode" type="negative" size="medium" />
        </Anti.Column>
        
        <Anti.Column type="border" width="half" padding="medium" spacing="small">
          <Anti.Text type="heading3">Schedule Maintenance</Anti.Text>
          
          <Anti.Input name="maintenance-title" placeholder="Maintenance title" width="full" />
          <Anti.Input name="maintenance-date" type="date" width="full" />
          <Anti.Textarea name="maintenance-notes" placeholder="Add notes about this maintenance..." width="full" />
          
          <Anti.Row width="full" justify="space-between" align="center">
            <Anti.Checkbox name="notify-users" label="Notify all users" />
            <Anti.Button action="schedule" text="Schedule" type="primary" size="medium" />
          </Anti.Row>
        </Anti.Column>
      </Anti.Row>
    </Anti.Column>
  </Anti.Row>
</Anti.Column>

Column

Column component is used to render a column of content. It has the following props:

Name
align
Type
"left" | "center" | "right"
Description
Alignment of the content within the column.
Name
justify
Type
"start" | "center" | "end" | "space-between" | "space-around"
Description
Justification of the content within the column.
Name
spacing
Type
"small" | "medium" | "large"
Description
Gap between the content within the column. Defaults to small.
Name
padding
Type
"none" | "small" | "medium" | "large"
Description
Padding within the column. Defaults to none.
Name
type
Type
"default" | "border"
Description
Visual style of the column. border adds a border around the column. Defaults to default.
Name
highlighted
Type
boolean
Description
Whether the column should have a highlighted background.
Name
width
Type
"full" | "half" | "auto"
Description
Width of the column relative to its container. Defaults to auto.
Name
clickAction
Type
string?
Description
Action to be performed when the column is clicked.
Name
children
Type
any
Description
The content to render inside the column.

Column Component

<Column align="center" justify="center" spacing="medium" padding="medium" type="border">
  <Text>Content inside a bordered column</Text>
</Column>

Row

Row component is used to render a row of content. It has the following props:

Name
align
Type
"top" | "center" | "bottom"
Description
Vertical alignment of the content within the row. Defaults to top.
Name
justify
Type
"start" | "center" | "end" | "space-between" | "space-around"
Description
Horizontal justification of the content within the row.
Name
spacing
Type
"small" | "medium" | "large"
Description
Gap between the content within the row. Defaults to small.
Name
padding
Type
"none" | "small" | "medium" | "large"
Description
Padding within the row. Defaults to none.
Name
type
Type
"default" | "border" | "side-border" | "side-border-reverse"
Description
Visual style of the row. border adds a border around the row. side-border adds a left border, side-border-reverse adds a right border. Defaults to default.
Name
highlighted
Type
boolean
Description
Whether the row should have a highlighted background.
Name
width
Type
"full" | "half" | "auto"
Description
Width of the row relative to its container. Defaults to auto.
Name
clickAction
Type
string?
Description
Action to be performed when the row is clicked.
Name
children
Type
any
Description
The content to render inside the row.

Row Component

<Row align="center" justify="space-between" spacing="medium" padding="small" highlighted>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
</Row>

Text

Text component is used to render a text element. It has the following props:

Name
type
Type
"display" | "heading1" | "heading2" | "heading3" | "subheading" | "body" | "text" | "small" | "caption" | "dim" | "negative" | "positive" | "accent" | "cyber" | "light"
Description
Type of the text element. Defaults to text. negative replaces the old danger.
Name
align
Type
"left" | "center" | "right"
Description
Alignment of the text within the element.
Name
weight
Type
"light" | "regular" | "medium" | "semibold" | "bold"
Description
Weight of the text. Defaults to regular.
Name
tracking
Type
"tighter" | "tight" | "normal" | "wide" | "wider"
Description
Letter spacing of the text. Defaults to normal.
Name
children
Type
string | number | any
Description
The content to render inside the text element. Can be a string, number, or other components.

Text Component

<Text type="heading1" weight="bold" tracking="tight">
  Hello Antispace!
</Text>
<Text type="negative">This is an error message.</Text>
<Text type="small" dim>Optional helper text.</Text>

Button

Button component is used to render a button. It has the following props:

Name
action
Type
string
Description
Action name to be invoked when the button is clicked.
Name
text
Type
string
Description
Text to be displayed on the button.
Name
loadingText
Type
string?
Description
Custom text to be displayed while the UI request triggered by this button is loading.
Name
disabled
Type
boolean?
Description
Whether the button is disabled.
Name
disabledWhen
Type
string?
Description
A JavaScript condition (referencing form values by name) that disables the button client-side. E.g., !values.email.
Name
type
Type
"primary" | "secondary" | "negative" | "bold" | "accent"
Description
Type of the button. Defaults to primary. negative replaces the old danger.
Name
size
Type
"small" | "medium" | "large"
Description
Size of the button. Defaults to medium.

Button Component

<Button action="run_echo" text="Echo" />
<Button action="delete_item" text="Delete" type="negative" size="small" />
<Button action="submit_form" text="Submit" disabledWhen="!values.name || !values.email" />

Input

Input component is used to render an input field. It has the following props:

Name
name
Type
string
Description
Name of the input field. This key will be used in the values object passed to your action handler.
Name
type
Type
"text" | "number" | "date"
Description
Type of the input field. Defaults to text.
Name
placeholder
Type
string?
Description
Placeholder text to be displayed in the input field.
Name
disabled
Type
boolean?
Description
Whether the input field is disabled.
Name
width
Type
"full" | "half" | "auto"
Description
Width of the input relative to its container. Defaults to auto.
Name
disabledWhen
Type
string?
Description
A JavaScript condition (referencing other form values by name) that disables the input client-side. E.g., values.useDefaults.

Input Component

<Input name="textToEcho" placeholder="Type something..." width="full" />
<Input name="count" type="number" placeholder="Enter a number" />

Textarea

Textarea component is used to render a multi-line text input area. It has the following props:

Name
name
Type
string
Description
Name of the textarea field. This key will be used in the values object passed to your action handler.
Name
placeholder
Type
string?
Description
Placeholder text to be displayed in the textarea field.
Name
disabled
Type
boolean?
Description
Whether the textarea field is disabled.
Name
width
Type
"full" | "half" | "auto"
Description
Width of the textarea relative to its container. Defaults to auto.
Name
disabledWhen
Type
string?
Description
A JavaScript condition (referencing other form values by name) that disables the textarea client-side. E.g., values.isLocked.

Text Area Component

<Textarea name="aboutMe" placeholder="Tell us about yourself..." width="full" />

Select

Select component is used to render a dropdown select input. It renders SelectOption components as children. It has the following props:

Name
name
Type
string
Description
Name of the select field. This key will be used in the values object passed to your action handler.
Name
disabled
Type
boolean?
Description
Whether the select field is disabled.
Name
width
Type
"full" | "half" | "auto"
Description
Width of the select relative to its container. Defaults to auto.
Name
disabledWhen
Type
string?
Description
A JavaScript condition (referencing other form values by name) that disables the select client-side. E.g., values.country !== 'US'.
Name
children
Type
any
Description
Should contain one or more SelectOption components.

SelectOption

Used inside a Select component to define an option.

Name
value
Type
string
Description
The value submitted when this option is selected.
Name
label
Type
string
Description
The text displayed for this option in the dropdown.

Select Component

<Select name="language" width="half">
  <SelectOption value="en" label="English" />
  <SelectOption value="es" label="Spanish" />
  <SelectOption value="fr" label="French" />
</Select>

Checkbox

Checkbox component is used to render a checkbox input. It has the following props:

Name
name
Type
string
Description
Name of the checkbox field. This key will be used in the values object (as a boolean) passed to your action handler.
Name
label
Type
string
Description
Label to be displayed next to the checkbox.
Name
disabled
Type
boolean?
Description
Whether the checkbox field is disabled.
Name
disabledWhen
Type
string?
Description
A JavaScript condition (referencing other form values by name) that disables the checkbox client-side. E.g., !values.emailProvided.

Checkbox Component

<Checkbox name="agreeToTerms" label="I agree to the terms and conditions" />

Image

Image component is used to render an image. It has the following props:

Name
src
Type
string
Description
URL of the image.
Name
alt
Type
string?
Description
Alternative text to be displayed if the image cannot be loaded. Defaults to an empty string.
Name
width
Type
number?
Description
Width of the image in pixels. Will scale proportionally if only one dimension is provided, or fill available space if neither is provided.
Name
height
Type
number?
Description
Height of the image in pixels. Will scale proportionally if only one dimension is provided, or fill available space if neither is provided.
Name
fit
Type
"cover" | "contain"
Description
How the image should resize to fit its container. Defaults to cover.
Name
rounded
Type
boolean?
Description
Whether the image should be rendered as a circle (aspect ratio 1:1 enforced).
Name
filter
Type
"grayscale"
Description
Applies a visual filter to the image. Currently only grayscale is supported.

Image Component

<Image
  src="https://example.com/avatar.jpg"
  alt="User avatar"
  width={40}
  height={40}
  rounded
/>
 <Image
  src="https://example.com/photo.jpg"
  alt="Grayscale landscape"
  filter="grayscale"
  width={200}
/>

Link

Link component is used to render an external link (opens in a new tab). It has the following props:

Name
href
Type
string
Description
URL of the link. Must be a valid URL (e.g., start with https:// or http://).
Name
text
Type
string
Description
Text to be displayed for the link.

Link Component

<Link href="https://antispace.io" text="Visit Antispace" />

Badge

Badge component is used to render a small badge element, often used for status indicators or tags. It has the following props:

Name
type
Type
"primary" | "secondary" | "danger" | "accent"
Description
Color scheme of the badge. Defaults to primary.
Name
text
Type
string
Description
Text to be displayed on the badge.

Badge Component

<Badge type="secondary" text="New Email" />
<Badge type="danger" text="Urgent" />
<Badge type="accent" text="Featured" /> {/* Example with new accent type */}

Divider

Divider component is used to render a horizontal or vertical dividing line. It has the following props:

Name
type
Type
"horizontal" | "vertical"
Description
Direction of the divider. Defaults to horizontal.

Divider Component

<Text>Section 1</Text>
<Divider /> {/* Defaults to horizontal */}
<Text>Section 2</Text>

<Row align="center" spacing="small">
  <Text>Left</Text>
  <Divider type="vertical" />
  <Text>Right</Text>
</Row>

Components SDK