Callout

Usage

Callouts can be used to display non-urgent information such as a status, related content, or context-specific help. Callouts are used to highlight information amongst other content.

Edit live code

Text content

Callouts do not have their own text styles, you can use typography components such as P directly inside them.

• Never put plain text directly inside a Callout
• Always use typography components

Form guidance

Unlike the Notification and Error Summary components, callouts should not be used to display form submission errors or any information that requires the user's immediate attention.

• Never use Callout to display form errors

Variations

Callouts will use the "info" variant by default, but you can use the available variants with the variant prop.

Edit live code

With icon

Callouts can show an icon to the left by using the icon prop. See the Icon Component for adding additional icons.

Edit live code

Custom Variant

Custom variants can be defined in your theme using the variants property.

import { createTheme, Callout } from '@ovotech/nebula';
import { ThemeProvider } from 'styled-components';

const Example = () => {
  const theme = createTheme({
    callout: {
      variants: {
        golden: {
          background: 'goldenrod',
          foreground: 'white',
        }
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <Callout variant="golden"><P>Gold</P></Callout>
    </ThemeProvider>
  );
};
import { createTheme, Callout } from '@ovotech/nebula';
import { ThemeProvider } from 'styled-components';

const Example = () => {
  const theme = createTheme({
    callout: {
      variants: {
        golden: {
          background: 'goldenrod',
          foreground: 'white',
        }
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <Callout variant="golden"><P>Gold</P></Callout>
    </ThemeProvider>
  );
};

Properties

Tokens

Theme tokens

Related

• Notification
• Error Summary