Buttons & CTAs / Button

Underlined CTA

Inline text link with a dashed underline. Used for low-emphasis navigational actions. Violet and black colors, small (12px) and medium (14px) sizes.

V 1.0View in Storybook

Controls

Color

Size

Label

Leading icon

Trailing icon

Variants

All combinationsViolet · Black × Small · Medium

VIOLET / SM

BLACK / SM

VIOLET / MD

BLACK / MD

Props

Name

Type

Default

color

'violet' | 'black'

'violet'

size

'sm' | 'md'

'md'

iconLeft

ReactNode

—

iconRight

ReactNode

—

children

ReactNode

—

Code

import { UnderlinedCta } from '@/src/components/Button/Button'

<UnderlinedCta color="violet" size="md" iconLeft={<InfoIcon />} iconRight={<ArrowIcon />}>
  CTA link
</UnderlinedCta>