Styling

Customize the look and feel of views

Color
Many components have a color prop that allows you to configure the component's color.
tsx
Copied
1
<Text color="primary">primary</Text>
2
<Text color="secondary">secondary</Text>
3
<Text color="success">success</Text>
4
<Text color="error">error</Text>
5
<Text color="dark">dark</Text>
6
<Text color="gray">gray</Text>
7
<Text color="red">pink</Text>
8
<Text color="pink">pink</Text>
9
<Text color="grape">grape</Text>
10
<Text color="violet">violet</Text>
11
<Text color="indigo">indigo</Text>
12
<Text color="blue">blue</Text>
13
<Text color="cyan">cyan</Text>
14
<Text color="teal">teal</Text>
15
<Text color="green">green</Text>
16
<Text color="lime">lime</Text>
17
<Text color="yellow">yellow</Text>
18
<Text color="orange">orange</Text>
Each color has 10 shades to choose from with 0 being the lightest and 9 being the darkest.
You can set the shade of a color by specifying <color>.<shade> for the color. When no shade is specified it defaults to 6.
tsx
Copied
1
<Text color="primary.0">primary.0</Text>
2
<Text color="primary.1">primary.1</Text>
3
<Text color="primary.2">primary.2</Text>
4
<Text color="primary.3">primary.3</Text>
5
<Text color="primary.4">primary.4</Text>
6
<Text color="primary.5">primary.5</Text>
7
<Text color="primary.6">primary.6 (default)</Text>
8
<Text color="primary.7">primary.7</Text>
9
<Text color="primary.8">primary.8</Text>
10
<Text color="primary.9">primary.9</Text>

Custom CSS styles
Views components are designed to have a consistent look and feel and are most commonly used with their default styling. For cases where more customization is desired, you can pass inline styles via the style prop or class names via the className prop to any of our components. These props apply their modifications to the outermost element of the component.
Using these props is discouraged. Styling needs that involve how to arrange components within the view are covered in Layout.

style
style allows a Javascript object with camel-cased CSS properties to be passed to a component.
tsx
Copied
1
<Button
2
  style={{
3
    backgroundColor: "steelblue",
4
    padding: 40,
5
    height: "auto",
6
  }}
7
  onClick={() => alert("hi")}
8
>
9
  My Custom Button
10
</Button>

className
className allows CSS class names to be passed to a component. These class names can come from CSS/CSS Modules files, or from other frameworks that generate class names. Here, we showcase an example using Emotion.
tsx
Copied
1
import { Button } from "@airplane/views";
2
import { css } from "@emotion/css";
3


4
const buttonStyle = css`
5
  background-color: steelblue;
6
  padding: 40px;
7
  height: auto;
8
`;
9


10
const CustomButton = () => {
11
  return (
12
    <Button className={buttonStyle} onClick={() => alert("hi")}>
13
      My Custom Button
14
    </Button>
15
  );
16
};
17


18
export default CustomButton;
We recommend className over style for more readability.

Styling custom components
Built-in HTML elements like <div> and 3rd party components within your custom component can be styled using most React styling strategies.
See Styling custom and third party components for more information.
PrivacyTermsSupport