Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Corner Ornament

Version 1.0.0GithubStorybookPeer review pending

Corner Ornament is a container used to apply a cutout to a base component and position another element as its ornament.

Installation

Installation page anchor
yarn add @twilio-paste/corner-ornament - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import { CornerOrnament, CornerOrnamentBase, CornerOrnamentContainer } from '@twilio-paste/core/corner-ornament';

export const Example = () => {
  return (
    <CornerOrnamentContainer cornerOrnamentType="badge" size="sizeIcon80">
      <CornerOrnamentBase>
        // Your ornament base here
      </CornerOrnamentBase>
      <CornerOrnament>
        <ScreenReaderOnly>{Your accessible reader value here}</ScreenReaderOnly>
        // Your corner ornament here
      </CornerOrnament>
    </CornerOrnamentContainer>
  );
};

Props

Props page anchor

CornerOrnamentBase

CornerOrnamentBase page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'CORNER_ORNAMENT_BASE'

padding

Ability to set the padding of the main element

Type
"space0"
Default
null

CornerOrnamentContainer

CornerOrnamentContainer page anchor

cornerOrnamentType RequiredRequired

The type of the corner ornament used. This determines that correct mask to apply to CornerOrnamentBase and without it the cutout will be incorrect.

Type
CornerOrnamentType
Default
null

size RequiredRequired

The size of the CornerOrnamentBase used to determine spacing

Type
| "sizeIcon05" | "sizeIcon10" | "sizeIcon20" | "sizeIcon30" | "sizeIcon40" | "sizeIcon50" | "sizeIcon60" | "sizeIcon70" | "sizeIcon80" | "sizeIcon90" | "sizeIcon100" | "sizeIcon110"
Default
null

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'{constantCase component-name}'

position

Sets the position of the CornerOrnament

Type
CornerOrnamentPosition
Default
'bottom_end'

CornerOrnament

CornerOrnament page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'{constantCase component-name}'