Examples

Let’s look at how to use some of the core components, showcasing both common and specific props.

`Text`

The Text component is for all textual content. It uses variant and size props to apply typography tokens (i.e., tokens.semantic.typography.${variant}.${size}) and also spreads the text sprinkle props like color, align, weight for easier access.


import { Text, Column } from "@codedazur/fusion-ui";
 
export function TextExamples() {
  return (
    <Column gap={200}>
      <Text as="h1" variant="display" size="large" color="primary.base">
        For extremely large text, use the display variant.
      </Text>
      <Text as="h2" variant="headline" size="large" align="center">
        For titles, use the headline variant.
      </Text>
      <Text as="p" variant="body" size="medium">
        For standard body text, use the body variant.
      </Text>
      <Text as="label" variant="label" size="medium" htmlFor="myInput">
        For labels, use the label variant.
      </Text>
    </Column>
  );
}

Warning

The Text component renders a span by default. Please make sure to use the as prop to change the underlying HTML element as appropriate, to ensure proper accessibility and semantic HTML.

If you want to abstract this, feel free to create more specific text components that suit your project’s needs.


import { Text, TextProps } from "@codedazur/fusion-ui";
 
const elements = {
  small: "h3",
  medium: "h2",
  large: "h1",
} satisfies Record<TextProps["size"], keyof JSX.IntrinsicElements>;
 
export function Headline({ size = "medium", children }: TextProps) {
  return (
    <Text as={elements[size]} variant="headline" size={size}>
      {children}
    </Text>
  );
}

`Button`

Just like the Text component, the Button component offers various styles and sizes. It also supports leading and trailing elements (e.g., for icons).


import { Button, Column, Icon } from "@codedazur/fusion-ui";
 
export function ButtonExamples() {
  return (
    <Column gap={300} align="flex-start">
      <Button variant="primary">Primary Button</Button>
      <Button variant="secondary">Secondary Button</Button>
      <Button variant="tertiary">Tertiary Button</Button>
      <Button variant="primary" size="large">
        Large Primary
      </Button>
      <Button variant="secondary" size="small">
        Small Secondary
      </Button>
      <Button variant="primary" leading={<Icon.Add />}>
        Add Item
      </Button>
      <Button variant="secondary" trailing={<Icon.ArrowRight />}>
        Next
      </Button>
    </Column>
  );
}

`Image`

The Image component handles image rendering, including aspect ratios. Styling like rounded corners can be applied using Surface or border sprinkle props.


import { Image, Column, Surface } from "@codedazur/fusion-ui";
 
export function ImageExamples() {
  return (
    <Column gap={500} constraints={{ maxWidth: 600 }}>
      <Image
        src="https://picsum.photos/seed/fusion-ui-1/600/400"
        alt="Placeholder image with a 3:2 aspect ratio"
        aspectRatio="3:2"
      />
      <Surface shape="circle" size="300">
        <Image
          src="https://picsum.photos/seed/fusion-ui-2/200/200"
          alt="Placeholder image with a 1:1 aspect ratio, rounded"
          aspectRatio="1:1"
        />
      </Surface>
      <Image
        src="https://picsum.photos/seed/fusion-ui-3/200/200"
        alt="Placeholder image with a 1:1 aspect ratio, rounded via border prop"
        aspectRatio="1:1"
        size="300"
        border={{ radius: 300 }}
      />
    </Column>
  );
}

`Column` and `Row`

Column and Row are essential flexbox layout components. Similar to how the Text component spreads the text sprinkle prop, these components spread the flex sprinkle prop for easier access to attributes such as align, justify, and gap.


import { Column, Row, Text } from "@codedazur/fusion-ui";
 
export function LayoutExample() {
  return (
    <Column
      gap={400}
      padding={400}
      background={{ color: "surface.container.base" }}
      border={{ radius: 300 }}
    >
      <Text variant="headline" size="medium">
        Items in a Column:
      </Text>
      <Text variant="body" size="medium">
        Item 1
      </Text>
      <Text variant="body" size="medium">
        Item 2
      </Text>
      <Row gap={300} justify="space-between" padding={{ top: 300 }}>
        <Text variant="body" size="small">
          Row Item A
        </Text>
        <Text variant="body" size="small">
          Row Item B
        </Text>
      </Row>
    </Column>
  );
}

Tip

For z-axis stacking (overlapping content), Fusion provides a Stack component.

`Card`

The Card component is a specialized Surface designed to present content in a structured way. It accepts all Surface props for its overall appearance and has dedicated props for media and info content.


import { Card, Image, Button, Icon } from "@codedazur/fusion-ui";
 
export function CardExample() {
  return (
    <Card
      constraints={{ maxWidth: 600 }}
      padding={400}
      border={{ color: "surface.outline", width: 100, radius: 300 }}
      media={
        <Image
          src="https://picsum.photos/seed/fusion-card/600/300"
          alt="Card Media"
          aspectRatio="2:1"
        />
      }
      info={{
        title: "Card Title Here",
        body: "This is some descriptive text within the card, explaining its content or purpose. It can be as long as needed.",
        actions: (
          <Button variant="primary" leading={<Icon.ArrowRight />} size="small">
            Learn More
          </Button>
        ),
      }}
      onClick={() => alert("Card clicked!")}
    />
  );
}

Examples

`Text`

`Button`

`Image`

`Column` and `Row`

`Card`

Further Reading

Exploring All Components

Component Overrides

Examples

Text

Button

Image

Column and Row

Card

Further Reading

Exploring All Components

Component Overrides

`Text`

`Button`

`Image`

`Column` and `Row`

`Card`