Styling & composition

import React from 'react';
import { View, Text } from 'app-studio';

export function Callout() {
  return (
    <View
      padding={24}
      borderRadius={12}
      backgroundColor="color-blue-50"
      borderWidth={1}
      borderStyle="solid"
      borderColor="color-blue-200"
    >
      <Text color="color-blue-900">
        A consistent foundation, with room for your design.
      </Text>
    </View>
  );
}

import React from 'react';
import { Horizontal } from 'app-studio';
import { Button } from '@app-studio/components';

export function Actions() {
  return (
    <Horizontal gap={12} flexWrap="wrap">
      <Button variant="filled" size="sm">
        Save
      </Button>
      <Button variant="outline" size="sm">
        Cancel
      </Button>
      <Button variant="ghost" size="sm">
        More options
      </Button>
    </Horizontal>
  );
}

import React from 'react';
import { Button } from '@app-studio/components';

export function CustomButton() {
  return (
    <Button
      variant="outline"
      views={{
        container: { borderRadius: 12 },
        content: { letterSpacing: 0.5 },
      }}
    >
      Your brand
    </Button>
  );
}

import React from 'react';
import { View } from 'app-studio';

export function StateExample() {
  return (
    <View
      as="button"
      padding={12}
      borderRadius={8}
      backgroundColor="color-blue-900"
      color="color-white"
      _hover={{ backgroundColor: 'color-blue-800' }}
      _focus={{ outline: '3px solid #93c5fd', outlineOffset: 3 }}
    >
      Focus or hover me
    </View>
  );
}