Skip to main content

Slot

warning

This component can be used as a foundation for creating other components with customizable design and functionality.

The Slot component provides a way to render either a child component or an icon with customizable styles, sizes, and click events.

Import​

Phaselis exports one main component for Slot.

import { Slot } from "phaselis";
  • Slot: Main Component import for Slot

Usage​

Basic Slot with Icon​

import { Slot } from "phaselis";

const Example = () => {
  return <Slot icon="Check" size="md" strokeWidth={2} />;
};

export default Example;

Slot with Child Component​

import { LucideIcon, Slot } from "phaselis";

const Example = () => {
  return (
    <Slot>
      <LucideIcon name="ArrowLeft" />
    </Slot>
  );
};

export default Example;

Props​

children​

ReactNode

An optional React child element to render within the Slot. If children is provided, it will override the icon prop.

import { LucideIcon } from "phaselis";
<Slot size="md">
  <LucideIcon name="ArrowRight" />
</Slot>

icon​

SlotIconName

Name of the icon to render if children is not provided.

<Slot icon="Settings" />

style​

array

An array of style objects applied to the Slot component or icon, containing defaultStyle, themeStyle, and propStyle.

<Slot icon="star" style={[defaultStyle, themeStyle, customStyle]} />

size​

ComponentSize

Controls the size of the child component or icon. Defaults to "md".

<Slot icon="Bell" size="lg" />

strokeWidth​

number

Sets the stroke width for the icon, allowing control over icon thickness.

<Slot icon="Bell" strokeWidth={1.5} />

onClick​

() => void

An optional callback function triggered when the Slot component or icon is clicked.

<Slot icon="Plus" onClick={() => console.log("Icon clicked")} />

width / height​

number

Custom width and height for the icon.

<Slot icon="ArrowRight" width={20} height={40} />