Corex · Elixir Phoenix Framework UI Library

Drawing

Set stroke color with the drawing_fill attribute on the signature pad root (for example drawing_fill="var(--color-accent)").

Sign here

    <.signature_pad class="signature-pad" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad" drawing_fill="var(--color-accent)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad" drawing_fill="var(--color-brand)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad" drawing_fill="var(--color-alert)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad" drawing_fill="var(--color-success)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad" drawing_fill="var(--color-info)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

Trigger

Use class="ui-{role}" to set the semantic palette of the clear and undo triggers on a signature pad.

Available options: accent, alert, brand, info, success

Sign here

    <.signature_pad class="signature-pad" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-accent" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-brand" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-alert" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-success" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-info" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

Variant

Variant modifiers control signature-pad surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add ui-solid for a filled surface.

Sign here

    <.signature_pad class="signature-pad" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-solid" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

Semantic × variant

Combine semantic palette and variant treatment on the same host, for example signature-pad ui-accent ui-solid.

Base

Accent

Alert

Brand

Info

Success

    <.signature_pad class="signature-pad" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-solid" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-ghost" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-accent" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-accent ui-solid" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-accent ui-ghost" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-alert" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-alert ui-solid" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-alert ui-ghost" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-brand" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-brand ui-solid" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-brand ui-ghost" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-info" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-info ui-solid" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-info ui-ghost" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-success" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-success ui-solid" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad ui-success ui-ghost" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

Size

Use class="ui-size-{size}" to set the size of a signature pad.

Available options: xs, sm, md (default), lg, xl

Sign here

    <.signature_pad class="signature-pad ui-size-sm" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-size-md" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-size-lg" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-size-xl" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

Max width

Without max-w-*, width comes from component CSS. Default for signature-pad: xs (width: 100%).

Use class="max-w-{step}" to set the maximum width of a signature pad root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs (default), sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (xs)

Sign here

none

Sign here

full

Sign here

9xs

Sign here

8xs

Sign here

7xs

Sign here

6xs

Sign here

5xs

Sign here

4xs

Sign here

3xs

Sign here

2xs

Sign here

xs

Sign here

sm

Sign here

md

Sign here

lg

Sign here

xl

Sign here

2xl

Sign here

3xl

Sign here

4xl

Sign here

5xl

Sign here

6xl

Sign here

7xl

Sign here

8xl

Sign here

9xl

Sign here

    <.signature_pad class="signature-pad" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-none" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-full" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-9xs" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-8xs" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-7xs" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-6xs" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-5xs" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-4xs" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-3xs" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-2xs" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-xs" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-sm" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-md" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-lg" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-xl" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-2xl" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-3xl" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-4xl" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-5xl" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-6xl" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-7xl" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-8xl" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

<.signature_pad class="signature-pad max-w-9xl" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a signature pad.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

Sign here

    <.signature_pad class="signature-pad ui-rounded-none" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-rounded-sm" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-rounded-md" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-rounded-lg" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>
<.signature_pad class="signature-pad ui-rounded-xl" drawing_fill="var(--color-ink)">
  <:label>Sign here</:label>
  <:clear_trigger><.heroicon name="hero-x-mark" /></:clear_trigger>
</.signature_pad>